当前位置：首页 > news >正文

axios的认识与基本使用

news 来源：原创 2025/5/13 15:17:47

axios简介

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

主要特点

从浏览器创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
超时处理
查询参数序列化支持嵌套项处理
自动将请求体序列化为：
- JSON (application/json)
- Multipart / FormData (multipart/form-data)
- URL encoded form (application/x-www-form-urlencoded)
将 HTML Form 转换成 JSON 进行请求
自动转换JSON数据
获取浏览器和 node.js 的请求进度，并提供额外的信息（速度、剩余时间）
为 node.js 设置带宽限制
兼容符合规范的 FormData 和 Blob（包括 node.js）
客户端支持防御XSRF

安装

在 Node.js 项目中

如果你正在开发一个 Node.js 项目，可以使用 npm 或 yarn 来安装 axios：

npm install axios
# 或者
yarn add axios

在浏览器环境中

如果是在浏览器环境中使用，可以通过 CDN 引入：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

或者通过模块打包工具（如 Webpack）进行安装并导入：

import axios from 'axios';

基本用法

发送 GET 请求

axios.get('https://api.example.com/data').then(response => {console.log('Data:', response.data);}).catch(error => {console.error('Error fetching data:', error);});

发送 POST 请求

axios.post('https://api.example.com/user', {firstName: 'John',lastName: 'Doe'
})
.then(response => {console.log('User created:', response.data);
})
.catch(error => {console.error('Error creating user:', error);
});

配置选项

你可以为请求设置各种配置选项，例如 headers、timeout 等：

axios.get('https://api.example.com/data', {params: {key1: 'value1',key2: 'value2'},headers: {'Authorization': 'Bearer YOUR_TOKEN'},timeout: 5000 // 设置超时时间
})
.then(response => {console.log('Data with config:', response.data);
})
.catch(error => {console.error('Error with config:', error);
});

响应配置

请求响包含信息

{// `data` 由服务器提供的响应data: {},// `status` 来自服务器响应的 HTTP 状态码status: 200,// `statusText` 来自服务器响应的 HTTP 状态信息statusText: 'OK',// `headers` 是服务器响应头// 所有的 header 名称都是小写，而且可以使用方括号语法访问// 例如: `response.headers['content-type']`headers: {},// `config` 是 `axios` 请求的配置信息config: {},// `request` 是生成此响应的请求// 在node.js中它是最后一个ClientRequest实例 (in redirects)，// 在浏览器中则是 XMLHttpRequest 实例request: {}
}

使用 then

axios.get('/user/12345').then(function (response) {console.log(response.data);console.log(response.status);console.log(response.statusText);console.log(response.headers);console.log(response.config);});

其他

使用 catch，或者传递一个rejection callback作为 then 的第二个参数时，响应可以通过 error 对象被使用，正如在错误处理部分解释的那样。

拦截器

拦截器允许你在请求被发送之前或响应被处理之前执行一些操作。这对于全局错误处理、日志记录、认证等非常有用。

// 添加请求拦截器
axios.interceptors.request.use(config => {// 在发送请求之前做些什么console.log('Request Interceptor:', config);return config;
}, error => {// 对请求错误做些什么return Promise.reject(error);
});// 添加响应拦截器
axios.interceptors.response.use(response => {// 对响应数据做点什么console.log('Response Interceptor:', response);return response;
}, error => {// 对响应错误做点什么if (error.response.status === 401) {// 处理未授权的情况}return Promise.reject(error);
});

取消请求

有时候你可能需要在请求完成前取消它，比如当用户导航离开页面时。axios 提供了取消请求的功能：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();axios.get('/user/12345', {cancelToken: source.token
}).catch(thrown => {if (axios.isCancel(thrown)) {console.log('Request canceled', thrown.message);} else {// 处理其他错误}
});// 取消请求
source.cancel('Operation canceled by the user.');

全局配置

你还可以为所有请求设置默认配置项，或者创建一个自定义的实例来应用特定的配置：

// 设置全局默认值
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer YOUR_TOKEN';// 创建一个自定义实例
const instance = axios.create({baseURL: 'https://api.example.com',timeout: 3000,headers: {'X-Custom-Header': 'foobar'}
});instance.get('/data').then(response => {console.log('Custom instance response:', response.data);}).catch(error => {console.error('Custom instance error:', error);});

错误处理

axios 的错误处理通常是通过 .catch() 方法来实现的。错误对象通常包含以下信息：

response: 包含服务器返回的所有信息。
request: 实际的 XMLHttpRequest 对象。
message: 错误消息。
config: 发起请求时的配置。

axios.get('https://api.example.com/bad-url').then(response => {console.log('Success:', response);}).catch(error => {if (error.response) {// 请求已发出，但服务器响应的状态码不在 2xx 范围内console.error('Server responded with an error:', error.response.status, error.response.data);} else if (error.request) {// 请求已发出，但没有收到响应console.error('No response received:', error.request);} else {// 在设置请求时发生了一些问题console.error('Error setting up request:', error.message);}});

axios的认识与基本使用

axios简介 Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。主要特点从浏览器创建 XML…...

编程日记 2025/5/13 15:17:47

springboot358智慧社区居家养老健康管理系统(论文+源码)_kaic

毕业设计（论文） 智慧社区居家养老健康管理系统设计与实现摘要传统办法管理信息首先需要花费的时间比较多，其次数据出错率比较高，而且对错误的数据进行更改也比较困难，最后，检索数据费事费力。因此&…...

编程日记 2025/5/11 13:36:55

java-a+b 开启java语法学习

代码 （ab) import java.util.Scanner; //导入 java.util包中的Scanner 类，允许读取键盘输入数据public class Main { // 创建一个公共类 Mainpublic static void main(String[] args) {//程序入口点，main方法Scanner scanner new Scanner(…...

编程日记 2025/5/8 21:04:12

SpringAi整合免费大模型（NVIDIA）

接上回，发布了springAI整合本地大模型之后，我们来看看怎么去利用别人已经训练好的大模型。如果对整合本地大模型感兴趣的，请阅读： SpringAI集成本地AI大模型ollama（调用篇）非常简单！&#xf…...

编程日记 2025/5/5 3:14:40

Flutter中的Future和Stream

在 Flutter 中，Future 和 Stream 都是用于处理异步操作的类，它们都基于 Dart 的异步编程模型，但是它们的使用场景和工作方式有所不同。以下是它们的区别以及各自适用的场景。目录一、Future1、基本使用2、异常处理1. catchError2. onError…...

编程日记 2025/5/11 14:23:19

Python将Excel文件转换为JSON文件

工作过程中，需要从 Excel 文件中读取数据，然后交给 Python 程序处理数据，中间需要把 Excel 文件读取出来转为 json 格式，再进行下一步数据处理。这里我们使用pandas库，这是一个强大的数据分析工具，能够方便地读取和处理各种数据格式。需要注意的是还需要引入openpyxl库，…...

编程日记 2025/5/13 14:59:44

MySQL中EXPLAIN的介绍、作用、字段含义

MySQL中EXPLAIN的介绍、作用、字段含义在MySQL中，EXPLAIN 是一个非常有用的命令，它可以帮助开发者和DBA理解查询执行计划，从而优化查询性能。EXPLAIN 可以模拟优化器执行SQL查询语句，而不真正执行这条语句，从而帮助用…...

编程日记 2025/5/11 14:38:06

Socket编程：UDP网络编程项目

目录一、回显服务器二、翻译器三、聊天室一、回显服务器项目介绍：使用UDPIPv4协议进行Linux网络编程，实现回显服务器和客户端功能介绍：客户端发送数据，经过服务端再返回到客户端，输出数据源代码&#xff1…...

编程日记 2025/5/13 15:17:46

uniapp echarts tooltip formation 不识别html

需求： echarts 的tooltip 的域名太长，导致超出屏幕想要让他换行思路一： 用formation自定义样式实现换行但是： uniapp 生成微信小程序， echart种的tooltip 的formation 识别不了html ，自定义样式没办…...

编程日记 2025/5/13 14:22:48

从0开始linux（39）——线程（2）线程控制

欢迎来到博主的专栏：从0开始linux 博主ID：代码小豪文章目录线程创建线程标识符线程参数多线程竞争资源回收线程detach 线程退出pthread_cancel 线程创建线程创建的函数为pthread_create。该函数是包含在posix线程库当中，posix线程是C语言…...

编程日记 2025/5/10 4:54:16

对载入的3dtiles进行旋转、平移和缩放变换。

使用 params: {tx: 129.75845, //模型中心X轴坐标（经度，单位：十进制度）//小左ty: 46.6839, //模型中心Y轴坐标（纬度，单位：十进制度）//小下tz: 28, //模型中心Z轴坐标（高…...

编程日记 2025/5/13 4:10:47

YOLO模型训练后的best.pt和last.pt区别

在选择YOLO模型训练后的权重文件best.pt和last.pt时，主要取决于具体的应用场景‌：‌12 ‌best.pt‌：这个文件保存的是在训练过程中表现最好的模型权重。通常用于推理和部署阶段，因为它包含了在验证集上表现最好的模型权重&#x…...

编程日记 2025/5/7 2:05:16

Qt 项目中同时使用 CMAKE_AUTOUIC 和 UiTools 的注意事项

在 Qt 项目开发中，.ui 文件是界面设计的重要组成部分。开发者可以通过两种主要方式使用 .ui 文件： 编译期处理：通过 Qt 的 uic 工具将 .ui 文件转化为 C 代码（ui_xxx.h），静态绑定到项目中。运行时动态加载…...

编程日记 2025/5/11 12:23:41

不玩PS抠图了，改玩Python抠图

网上找了两个苏轼的印章图片： 把这两个印章抠出来的话，对于不少PS高手来说是相当容易，但是要去掉其中的水印，可能要用仿制图章慢慢描绘，图章的边缘也要慢慢勾画或者用通道抠图之类来处理，而且印章的红色也不…...

编程日记 2025/5/12 22:40:39

ubuntu 22.04 mini 安装，在配置网络时重启后配置文件被重置原因与解决方法

在 /etc/netplan/50-cloud-init.yaml 配置文件中有一段注释中有说明 rootlocalhost:/etc/netplan# cat 50-cloud-init.yaml # This file is generated from information provided by the datasource. Changes # to it will not persist across an instance reboot. To disab…...

编程日记 2025/5/12 11:20:19

【Go底层】time包Ticker定时器原理

目录 1、背景2、go版本3、源码解释【1】Ticker结构【2】NewTicker函数解释 4、代码示例5、总结 1、背景说到定时器我们一般想到的库是cron，但是对于一些简单的定时任务场景，标准库time包下提供的定时器就足够我们使用，本篇文章我们就来研究…...

编程日记 2025/5/13 5:52:53

mac下Gpt Chrome升级成GptBrowser书签和保存的密码恢复

cd /Users/自己的用户名/Library/Application\ Support/ 目录下有 GPT\ Chrome/ Google/ GptBrowser/ GPT\ Chrome 为原来的chrome浏览器的文件存储目录. GptBrowser 为升级后chrome浏览器存储目录书签所在的文件 Bookmarks 登录账号Login 相关的文件拷贝到GptBrow…...

编程日记 2025/5/12 17:24:22

[Redis#6] list | 命令 | 应用 | 消息队列 | 微博 Timeline

目录 List 列表特点 2. 命令头插和尾插下标 range 查询头删和尾删 LINSERT LLEN LREM LTRIM LSET 阻塞命令 BLPOP BRPOP 操作总结 3. 内部编码 ziplist（压缩列表） linkedlist（链表） ✔️quicklist(快速链…...

编程日记 2025/5/10 4:01:02

服务器数据恢复—raid6阵列硬盘被误重组为raid5阵列的数据恢复案例

服务器存储数据恢复环境： 存储中有一组由12块硬盘组建的RAID6阵列，上层linux操作系统EXT3文件系统，该存储划分3个LUN。服务器存储故障&分析： 存储中RAID6阵列不可用。为了抢救数据，运维人员使用原始RAID中的部分…...

编程日记 2025/5/3 11:47:00

Xcode15（iOS17.4）打包的项目在 iOS12 系统上启动崩溃

0x00 启动崩溃崩溃日志，只有 2 行，看不出啥来。 0x01 默认配置由于我开发时，使用的 Xcode 14.1，打包在另外一台电脑 Xcode 15.3 Xcode 14.1 Build Settings -> Asset Catalog Compliter - Options Xcode 15.3 Build S…...

编程日记 2025/5/13 2:26:51

Netty的心跳机制怎么实现的？

大家好，我是锋哥。今天分享关于【Netty的心跳机制怎么实现的？】面试题。希望对大家有帮助； Netty的心跳机制怎么实现的？ 1000道互联网大厂Java工程师精选面试题-Java资源分享网 Netty 的心跳机制用于维持客户端和服务器之间的…...

编程日记 2025/5/10 13:51:49

常用函数的使用错题汇总

目录 new/delete malloc/free1. 语言和类型2. 内存分配3. 内存释放4. 安全性和类型安全5. 其他特性总结线程停止文件流 new/delete malloc/free malloc/free 和 new/delete 是 C/C 中用于动态内存管理的两种方式，它们有一些重要的区别。以下是这两种方式的比较&…...

编程日记 2025/5/10 8:46:47

使用 `aircrack-ng`扫描、获取握手包

使用 aircrack-ng 工具集来扫描 5GHz WiFi 网络的过程与扫描 2.4GHz 网络类似，但需要注意一些特定的配置和命令。以下是一个详细的步骤指南，帮助你在 5GHz 频段上扫描 WiFi 网络并捕获握手包。 ### 前提条件 1. **操作系统**：通常在 Linux 系…...

编程日记 2025/5/11 7:24:33

css—轮播图实现

一、背景最近和朋友在一起讨论的时候，我们提出了这样的一个提问，难道轮播图的效果只能通过js来实现吗？经过我们的一系列的争论，发现了这是可以通过纯css来实现这一效果的，CSS轮播图也是一种常见的网页展示方式&#x…...

编程日记 2025/5/13 14:11:36

Ardusub源码剖析(1)——AP_Arming_Sub

代码 AP_Arming_Sub.h #pragma once#include <AP_Arming/AP_Arming.h>class AP_Arming_Sub : public AP_Arming { public:AP_Arming_Sub() : AP_Arming() { }/* Do not allow copies */CLASS_NO_COPY(AP_Arming_Sub);bool rc_calibration_checks(bool display_failure)…...

编程日记 2025/5/13 10:04:19

ESP32-S3模组上跑通ES8388（10）

接前一篇文章：ESP32-S3模组上跑通ES8388（9） 二、利用ESP-ADF操作ES8388 2. 详细解析上一回解析了es8388_init函数中的第3段代码（也是实际与ES8388寄存器打交道的第1段代码），本回继续往下解析。为了便于理…...

编程日记 2025/5/8 22:10:19

AI/ML 基础知识与常用术语全解析

目录一.引言二.AI/ML 基础知识 1.人工智能（Artificial Intelligence，AI） (1).定义 (2).发展历程 (3).应用领域 2.机器学习（Machine Learning，ML） (1).定义 (2).学习方式 ①.监督学习 ②.无监督…...

编程日记 2025/5/11 11:28:41

【C#设计模式(15)——命令模式(Command Pattern)】

前言命令模式的关键通过将请求封装成一个对象，使命令的发送者和接收者解耦。这种方式能更方便地添加新的命令，如执行命令的排队、延迟、撤销和重做等操作。代码 #region 基础的命令模式 //命令（抽象类） public abstract class …...

编程日记 2025/5/9 14:56:55

Could not resolve com.android.tools.build:gradle:7.4.2.

Android Studio编译项目报错如下，始终无法下载解析7.4.2的gradle classpath A problem occurred configuring root project aistudyclient_questionlib. > Could not resolve all files for configuration :classpath.> Could not resolve com.android.tools…...

编程日记 2025/5/7 23:43:08

uniapp在App端定义全局弹窗，当打开关闭弹窗会触发onShow、onHide生命周期怎么解决？

在uniapp(App端)中实现自定义弹框，可以通过创建一个透明页面来实现。点击进入当前页面时，页面背景会变透明，用户可以根据自己的需求进行自定义，最终效果类似于弹框。遇到问题：当打开弹窗(进入弹窗页面)就会触发当前页…...

编程日记 2025/5/11 15:24:58

2024 ccpc 辽宁省赛 E(构造思维？)L（二分+一点点数论知识？）

E 题意： 可以注意到： 我的两种方格都四个方格的大小。所以如果存在一种摆放方式那么 4|nm。再考虑一种特殊的情况 22 ，此时虽然我的积是4 但是无法摆放的。 1>对于 4 | n,或者 4 | m.我直接摆放第二种方格就可以了。如果我n 是4 的…...

编程日记 2025/5/13 14:55:12

IIC 随机写+多次写可以控制写几次

verilog module icc_tx#(parameter SIZE 2 , //用来控制写多少次比如地址是0000 一个地址只能存放8bit数据超出指针就会到下一个地址0001parameter CLK_DIV 50_000_000 ,parameter SPEED 100_000 ,parameter LED 50 )( input wire c…...

编程日记 2025/5/13 14:06:51

基于SpringBoot+Vue的汽车票网上预订系统-无偿分享 (附源码+LW+调试)

目录 1. 项目技术 2. 功能菜单 3. 部分功能截图 4. 研究背景 5. 研究目的 6. 可行性分析 6.1 技术可行性 6.2 经济可行性 6.3 操作可行性 7. 系统设计 7.1 概述 7.2 系统流程和逻辑 7.3 系统结构 8. 数据库设计 8.1 数据库ER图 （1）公告信…...

编程日记 2025/5/11 13:04:02

net9 abp vnext 多语言通过数据库动态管理

通过数据库加载实现动态管理，用户可以自己修改界面显示的文本，满足国际化需求如图所示,前端使用tdesign vnext 新建表TSYS_Localization与TSYS_LocalizationDetail 国旗图标下载网址flag-icons: Free Country Flags in SVG 在Shared下创建下图3个文件 …...

编程日记 2025/5/9 20:07:15

pip安装github上的开源软件包

1、若本机中安装的有git，可使用githttps方式安装 # 以安装pyfolio软件包为例,安装指令如下 pip install githttps://github.com/quantopian/pyfolio.git 2、若本机中没有安装git，可以直接使用软件包的zip地址进行安装 # 以安装pyfolio软件包为例,安装…...

编程日记 2025/5/13 11:20:23

【LeetCode刷题之路】120：三角形最小路径和的两种解法（动态规划优化）

LeetCode刷题记录 🌐 我的博客主页：iiiiiankor🎯 如果你觉得我的内容对你有帮助，不妨点个赞👍、留个评论✍，或者收藏⭐，让我们一起进步！📝 专栏系列：LeetCode…...

编程日记 2025/5/13 15:02:51

架构04-透明多级分流系统

零、文章目录架构04-透明多级分流系统 1、透明多级分流系统 （1）概述 **定义：**透明多级分流系统是指在用户请求从客户端发出到最终查询或修改数据库信息的过程中，通过多个技术部件对流量进行合理分配，以提高系统的…...

编程日记 2025/5/7 13:50:52

云原生后端开发：构建现代化可扩展的服务

随着微服务架构的普及和容器化技术的成熟，云原生后端开发成为了构建现代化、可扩展系统的关键。本文将从云原生理念出发，结合实际案例，探讨如何使用 Kubernetes、服务网格、微服务架构等技术构建高效的云原生后端。一、云原生的核心理念 1.…...

编程日记 2025/5/13 14:48:56

在Windows和Linux系统上获取网卡MAC地址及相关信息所有常用方法整理

摘要在网络管理和故障排除中，了解如何获取网卡的MAC地址、IP地址以及网卡名称是系统管理员必备的技能。本文将介绍在Windows和Linux系统上手动获取网卡MAC地址的方法，并提供脚本以自动化获取服务器中网卡信息的过程。这些技巧和工具将帮助新手系统管理…...

编程日记 2025/5/11 1:58:55

制作苹果IOS.APP所使用步骤和方法-有步骤视情况待完善

1.获取开发工具首先，您需要下载并安装Xcode。Xcode是苹果开发iOS和macOS应用程序的官方集成开发环境（IDE）。它包含了必要的工具，例如代码编辑器、调试器、编译器和界面构建器。Xcode可在Mac App Store中免费下载。 2.学习Swift或…...

编程日记 2025/5/13 12:25:37

【conda】全面解析 Conda 配置文件：从完整示例到最佳实践

目录引言一、Conda 配置文件示例1.1 中英文注释示例1.2 文件编码格式二、详细解释2.1 ssl_verify: true2.2 channels2.3 envs_dirs2.4 pkgs_dirs2.5 custom_channels2.6 remote_read_timeout_secs 和 remote_connect_timeout_secs2.7 show_channel_urls2.8 default_packages2…...

编程日记 2025/5/12 6:50:48

ffmpeg命令详解

原文网址：ffmpeg命令详解_IT利刃出鞘的博客-CSDN博客简介本文介绍ffmpeg命令的用法。命令示例 1.mp4和avi的基本互转 ffmpeg -i D:\input.mp4 E:\output.avi ffmpeg -i D:\input.avi E:\output.mp4 -i 表示input，即输入。后面填一个输入地址和一…...

编程日记 2025/5/9 3:51:08

asyncio.run() 里面嵌套 asyncio.run() 可以吗？

[TOC](asyncio.run() 里面嵌套 asyncio.run() 可以吗？) 在 Python 的异步编程中，asyncio 是一个非常重要的模块，它提供了编写单线程并发代码的基础设施。asyncio.run() 是一个方便的函数，用于运行一个协程并管理事件循环的生命周…...

编程日记 2025/5/12 3:17:38

flutter in_app_purchase google支付 PG-GEMF-01错误

问题：PG-GEMF-01错误 flutter 使用in_app_purchase插件升降级订阅时报错PG-GEMF-01。解决方案： 升降级订阅时，确保不调用 MethodCallHandlerImpl.java文件中的 setObfuscatedAccountId()方法、setObfuscatedProfileId()方法原因&#xf…...

编程日记 2025/5/13 12:07:44

Flink 离线计算

文章目录一、样例一：读 csv 文件生成 csv 文件二、样例二：读 starrocks 写 starrocks三、样例三：DataSet、Table Sql 处理后写入 StarRocks四、遇到的坑 <dependency><groupId>org.apache.flink</groupId><artifactId&…...

编程日记 2025/5/13 4:21:36

排序算法之插入排序篇

插入排序思路： 就是将没有排序的元素逐步地插入到已经排好序的元素后面，保持元素的有序视频的实现过程如下： 插入排序全过程代码实现过程如下： public static void Insertion(int[] arr) { for (int i 1; i < arr.length…...

编程日记 2025/5/13 14:21:42

（11）(2.2) BLHeli32 and BLHeli_S ESCs（二）

文章目录前言 1 传递支持前言 BLHeli 固件和配置应用程序的开发是为了允许配置 ESC 并提供额外功能。带有此固件的 ESC 允许配置定时、电机方向、LED、电机驱动频率等。在尝试使用 BLHeli 之前，请按照 DShot 设置说明进行操作(DShot setup instructions)。 1 传…...

编程日记 2025/5/10 5:09:09