【前端】基于 Promise 的 HTTP 客户端工具Axios 详解

Axios 详解

---

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. 基本用法示例

1. // 安装（Node.js 环境）
2. npm install axios
4. // 发送 GET 请求
5. axios.get('/api/users', {
6.   params: { id: 1 } // 查询参数
7. })
8. .then(response => {
9.   console.log(response.data);
10. })
11. .catch(error => {
12.   console.error('Error:', error);
13. });
15. // 发送 POST 请求
16. axios.post('/api/create', {
17.   name: 'Alice',
18.   age: 25
19. }, {
20.   headers: { 'Content-Type': 'application/json' }
21. })
22. .then(response => console.log(response.data))
23. .catch(error => console.error(error));

复制代码

---

4. 配置选项

配置项描述baseURL请求的基础路径（全局或实例配置）。timeout请求超时时间（毫秒）。headers自定义请求头（如 Authorization）。withCredentials是否允许跨域请求携带凭证（如 Cookie）。paramsSerializer自定义参数序列化函数（如处理对象为 URL 参数）。

1. // 全局配置示例
2. axios.defaults.baseURL = 'https://api.example.com';
3. axios.defaults.timeout = 5000;

复制代码

---

5. 拦截器

• 请求拦截器：在请求发送前修改配置：
  
  1. axios.interceptors.request.use(config => {
  2.   // 添加 Token
  3.   config.headers.Authorization = `Bearer ${localStorage.token}`;
  4.   return config;
  5. }, error => Promise.reject(error));

  复制代码
• 响应拦截器：在响应返回后处理数据或错误：
  
  1. axios.interceptors.response.use(response => {
  2.   return response.data; // 简化后续 .then() 的数据获取
  3. }, error => {
  4.   if (error.response.status === 401) {
  5.     // 处理未授权错误（如跳转登录页）
  6.   }
  7.   return Promise.reject(error);
  8. });

  复制代码

---

6. 错误处理

• 常见错误范例：
  
  
  
  • error.response：包罗状态码和响应数据（如 404、500）。
    
  • error.request：请求已发送但无响应。
    
  • error.message：其他错误信息（如网络标题）。
    
  
  

1. axios.get('/api/invalid')
2. .catch(error => {
3.   if (error.response) {
4.     console.log('Status:', error.response.status);
5.     console.log('Error Data:', error.response.data);
6.   } else {
7.     console.log('Request Failed:', error.message);
8.   }
9. });

复制代码

---

7. 与 Fetch 的对比

特性AxiosFetchPromise 支持原生支持原生支持请求/响应拦截支持不支持取消请求支持需通过 AbortController 实现JSON 主动解析主动转换需调用 response.json()浏览器兼容性兼容性好（需 polyfill 旧版浏览器）需 polyfill IE 等旧版浏览器

---

8. 常见场景

• 跨域请求：通过 CORS 配置或代理办理（如在开发情况配置代理）。
  
• 上传文件：
  1. const file = document.querySelector('input[type="file"]').files[0];
  2. const formData = new FormData();
  3. formData.append('file', file);
  4. axios.post('/api/upload', formData, {
  5.   headers: { 'Content-Type': 'multipart/form-data' }
  6. });

  复制代码

---

9. 最佳实践

• 制止全局配置污染：通过 axios.create() 创建实例，隔离不同情况配置。
  
• 同一错误处理：通过拦截器会合处理 Token 过期、网络错误等通用标题。
  
• 取消重复请求：在组件卸载时取消未完成的请求，制止内存泄漏。
  
• 合理设置超时：根据接口复杂度调整 timeout 防止阻塞。
  

1. // 创建实例示例
2. const apiClient = axios.create({
3.   baseURL: '/api',
4.   timeout: 10000
5. });

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。