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

Axios 详解

1. 简介

• 定义：Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 环境，简化 HTTP 请求的发送和处理。
• 核心特点：
  • 支持 Promise API，可链式调用。
  • 自动转换 JSON 数据。
  • 支持请求/响应拦截。
  • 可取消请求。
  • 客户端支持防抖和跨域请求。

2. 核心功能

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. 配置选项

// 全局配置示例
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 的对比

8. 常见场景

• 跨域请求：通过 CORS 配置或代理解决（如在开发环境配置代理）。
• 上传文件：

  const file = document.querySelector('input[type="file"]').files[0];
  const formData = new FormData();
  formData.append('file', file);
  axios.post('/api/upload', formData, {
    headers: { 'Content-Type': 'multipart/form-data' }
  });
  

9. 最佳实践

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

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