Axios 是一个基于 Promise 的 HTTP 客户端库，可在浏览器和 Node.js 环境中使用。它主要用于简化 Web 应用程序与服务器之间的 HTTP 通信。
== 概述 ==
Axios 于 2014 年首次发布，目前是一个在 GitHub 上积极维护的开源项目。它基于 XMLHttpRequest 接口，提供 JSON 数据自动转换、请求/响应拦截、自动转换、客户端 XSRF 保护等多种功能。
== 主要功能 ==
- Promise API 支持：提供基于 Promise 的 API 以处理异步请求。
- 请求/响应拦截：可拦截 HTTP 请求和响应，进行修改或日志记录。
- 自动 JSON 转换：将从服务器接收的 JSON 数据自动转换为 JavaScript 对象。
- 取消请求：提供取消请求的功能。
- 并发请求：可同时执行多个请求并处理结果。
- CSRF 保护：支持客户端跨站请求伪造保护。
- 浏览器/Node.js 兼容：可在两种环境中使用。
== 安装 ==
=== npm ===
bash
npm install axios
=== yarn ===
bash
yarn add axios
=== CDN ===
html
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
== 基本用法 ==
=== GET 请求 ===
javascript
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
=== POST 请求 ===
javascript
axios.post('/user', {
firstName: 'John',
lastName: 'Doe'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
=== 并发请求 ===
javascript
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 两个请求都已完成
}));
== 配置选项 ==
在 Axios 请求中可以设置多种配置选项：
javascript
{
// 请求 URL
url: '/user',
// 请求方法（默认值：'get'）
method: 'get',
// 基础 URL
baseURL: 'https://api.example.com',
// 请求头
headers: {'X-Requested-With': 'XMLHttpRequest'},
// 请求参数
params: {
ID: 12345
},
// 请求数据（用于 POST、PUT、PATCH 请求）
data: {
firstName: 'John'
},
// 请求超时时间（毫秒）
timeout: 1000,
// 响应类型（默认值：'json'）
responseType: 'json'
}
== 拦截器 ==
可以在请求或响应被 then 或 catch 处理之前拦截它们：
javascript
// 请求拦截器
axios.interceptors.request.use(function (config) {
// 请求前处理
return config;
}, function (error) {
// 请求错误处理
return Promise.reject(error);
});
// 响应拦截器
axios.interceptors.response.use(function (response) {
// 响应数据处理
return response;
}, function (error) {
// 响应错误处理
return Promise.reject(error);
});
== 错误处理 ==
Axios 支持多种错误处理方式：
javascript
axios.get('/user/12345')
.catch(function (error) {
if (error.response) {
// 服务器返回了超出 2xx 范围的状态码
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// 请求已发出但未收到响应
console.log(error.request);
} else {
// 请求配置时发生错误
console.log('Error', error.message);
}
console.log(error.config);
});
== 取消令牌 ==
可以使用取消令牌来取消请求：
javascript
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function (thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// 错误处理
}
});
// 取消请求
source.cancel('Operation canceled by the user.');
== 创建实例 ==
可以创建具有自定义配置的 Axios 实例：
javascript
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
== 浏览器支持 ==
Axios 支持以下浏览器：
- Chrome
- Firefox
- Safari
- Edge
- Internet Explorer 11
== 相关项目 ==
- axios-retry：请求失败时自动重试功能
- axios-mock-adapter：用于测试的模拟适配器
- vue-axios：与 Vue.js 的集成
- react-axios：React 组件
== 参考资料 ==
[[分类:JavaScript 库]]
[[分类:HTTP 客户端]]
[[分类:开源软件]]