Axios 是一个基于 Promise 的 HTTP 客户端，广泛用于浏览器和 Node.js 环境中，它支持请求和响应拦截、请求取消、自动数据转换等功能，是前端开发中处理 HTTP 请求的常用工具，本文将详细介绍 Axios 的核心功能、使用方法及最佳实践。
Axios 的核心特性
Axios 的设计目标是简化 HTTP 请求，并提供强大的扩展能力，其主要特性包括：
- Promise 支持：所有请求返回 Promise 对象，便于使用
async/await或链式调用。 - 请求/响应拦截：可在请求发送前或响应接收后进行统一处理，例如添加 token 或错误处理。
- 自动数据转换：默认将请求数据转换为 JSON，并自动解析响应数据。
- 请求取消：通过
CancelToken或AbortController取消未完成的请求。 - 跨平台支持：可在浏览器和 Node.js 中运行，支持同源和跨域请求。
基本使用方法
发送请求
Axios 提供了多种请求方法，如 get、post、put、delete 等，以下为常见示例：
// GET 请求
axios.get('/user', { params: { id: 1 } })
.then(response => console.log(response.data))
.catch(error => console.error(error));
// POST 请求
axios.post('/user', { name: 'John', age: 30 })
.then(response => console.log(response.data))
.catch(error => console.error(error));
配置选项
请求时可通过配置项自定义行为,
axios({
method: 'post',
url: '/user',
data: { name: 'John' },
timeout: 1000, // 超时时间（毫秒）
headers: { 'Authorization': 'Bearer token' }
});
并发请求
使用 axios.all 或 Promise.all 处理多个并发请求：
axios.all([
axios.get('/user/1'),
axios.get('/user/2')
])
.then(responses => {
console.log(responses[0].data);
console.log(responses[1].data);
});
拦截器的使用
拦截器分为请求拦截器和响应拦截器,用于统一处理请求和响应逻辑。
// 请求拦截器
axios.interceptors.request.use(config => {
config.headers.Authorization = 'Bearer token';
return config;
}, error => Promise.reject(error));
// 响应拦截器
axios.interceptors.response.use(response => {
return response.data;
}, error => {
if (error.response) {
console.error('Status:', error.response.status);
}
return Promise.reject(error);
});
错误处理
Axios 的错误分为网络错误、HTTP 错误（如 404、500）和请求配置错误，可通过 catch 或拦截器统一处理：
axios.get('/user/1')
.catch(error => {
if (error.response) {
// 服务器返回错误状态码
} else if (error.request) {
// 请求已发送但无响应
} else {
// 请求配置错误
}
});
与 Fetch API 的对比
| 特性 | Axios | Fetch API |
|---|---|---|
| 默认 JSON 解析 | 是 | 否 |
| 请求取消 | 支持（CancelToken） | 支持（AbortController） |
| 错误处理 | 统一处理（非 2xx 视为错误 | 仅网络错误抛出异常 |
| 拦截器 | 支持 | 不支持 |
最佳实践
- 封装请求：根据项目需求封装通用请求方法，简化调用逻辑。
- 统一错误处理：通过拦截器集中处理错误，避免重复代码。
- 环境适配：区分开发、测试和生产环境的 API 地址。
相关问答 FAQs
Q1：Axios 如何设置请求超时？
A：通过 timeout 配置项设置超时时间（单位：毫秒），
axios.get('/user', { timeout: 5000 }); // 5 秒超时
Q2：Axios 支持上传文件吗？
A：支持，可通过 FormData 对象实现文件上传：
const formData = new FormData();
formData.append('file', fileInput.files[0]);
axios.post('/upload', formData, {
headers: { 'Content-Type': 'multipart/form-data' }
});
原创文章，发布者：酷番叔，转转请注明出处：https://cloud.kd.cn/ask/70541.html
