【前端】基于 Promise 的 HTTP 客户端工具Axios 详解
Axios 详解https://i-blog.csdnimg.cn/direct/39d9a3c1b6ab4a1482f6b2b1fac74a6a.png
1. 简介
[*]定义：Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 情况，简化 HTTP 请求的发送和处理。
[*]核心特点：
[*]支持 Promise API，可链式调用。
[*]主动转换 JSON 数据。
[*]支持请求/响应拦截。
[*]可取消请求。
[*]客户端支持防抖和跨域请求。
2. 核心功能
功能描述GET/POST 请求发送 GET、POST 等 HTTP 方法请求。Promise 支持通过 .then() 和 .catch() 处理异步操作。拦截器在请求发送前或响应返回后拦截并修改请求/响应数据。取消请求通过 CancelToken 取消未完成的请求。响应范例支持 response.data、response.status 等详细响应信息。 3. 基本用法示例
// 安装（Node.js 环境）
npm install axios
// 发送 GET 请求
axios.get('/api/users', {
params: { id: 1 } // 查询参数
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error:', error);
});
// 发送 POST 请求
axios.post('/api/create', {
name: 'Alice',
age: 25
}, {
headers: { 'Content-Type': 'application/json' }
})
.then(response => console.log(response.data))
.catch(error => console.error(error));
4. 配置选项
配置项描述baseURL请求的基础路径（全局或实例配置）。timeout请求超时时间（毫秒）。headers自定义请求头（如 Authorization）。withCredentials是否允许跨域请求携带凭证（如 Cookie）。paramsSerializer自定义参数序列化函数（如处理对象为 URL 参数）。 // 全局配置示例
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 5000;
5. 拦截器
[*] 请求拦截器：在请求发送前修改配置：
axios.interceptors.request.use(config => {
// 添加 Token
config.headers.Authorization = `Bearer ${localStorage.token}`;
return config;
}, error => Promise.reject(error));
[*] 响应拦截器：在响应返回后处理数据或错误：
axios.interceptors.response.use(response => {
return response.data; // 简化后续 .then() 的数据获取
}, error => {
if (error.response.status === 401) {
// 处理未授权错误（如跳转登录页）
}
return Promise.reject(error);
});
6. 错误处理
[*]常见错误范例：
[*]error.response：包罗状态码和响应数据（如 404、500）。
[*]error.request：请求已发送但无响应。
[*]error.message：其他错误信息（如网络标题）。
axios.get('/api/invalid')
.catch(error => {
if (error.response) {
console.log('Status:', error.response.status);
console.log('Error Data:', error.response.data);
} else {
console.log('Request Failed:', error.message);
}
});
7. 与 Fetch 的对比
特性AxiosFetchPromise 支持原生支持原生支持请求/响应拦截支持不支持取消请求支持需通过 AbortController 实现JSON 主动解析主动转换需调用 response.json()浏览器兼容性兼容性好（需 polyfill 旧版浏览器）需 polyfill IE 等旧版浏览器 8. 常见场景
[*]跨域请求：通过 CORS 配置或代理办理（如在开发情况配置代理）。
[*]上传文件：const file = document.querySelector('input').files;
const formData = new FormData();
formData.append('file', file);
axios.post('/api/upload', formData, {
headers: { 'Content-Type': 'multipart/form-data' }
});
9. 最佳实践
[*]制止全局配置污染：通过 axios.create() 创建实例，隔离不同情况配置。
[*]同一错误处理：通过拦截器会合处理 Token 过期、网络错误等通用标题。
[*]取消重复请求：在组件卸载时取消未完成的请求，制止内存泄漏。
[*]合理设置超时：根据接口复杂度调整 timeout 防止阻塞。
// 创建实例示例
const apiClient = axios.create({
baseURL: '/api',
timeout: 10000
});
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]