axios的认识与基本使用

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);}});