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)
- JSON (
- 将 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);}});
