什么是 axios 以及它与原生 fetch API 相比有哪些优势？ - 面试题

什么是 axios

Axios 是一个基于 Promise 的 HTTP 客户端，可以用在浏览器和 Node.js 环境中。它提供了简洁的 API 来处理 HTTP 请求和响应。

Axios 相比 Fetch API 的优势

1. 自动转换 JSON 数据

javascript
// Axios 自动处理 JSON
const response = await axios.get('/api/users');
console.log(response.data); // 已经是 JavaScript 对象

// Fetch 需要手动转换
const response = await fetch('/api/users');
const data = await response.json(); // 需要额外调用

2. 请求/响应拦截器

javascript
// 添加请求拦截器
axios.interceptors.request.use(config => {
  config.headers.Authorization = `Bearer ${token}`;
  return config;
});

// 添加响应拦截器
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      // 处理未授权
    }
    return Promise.reject(error);
  }
);

3. 请求取消功能

javascript
const controller = new AbortController();
axios.get('/api/data', {
  signal: controller.signal
});
// 取消请求
controller.abort();

4. 更好的错误处理

Axios 在 HTTP 错误状态码（4xx, 5xx）时会自动 reject Promise
提供了更详细的错误信息（response, request, config 等）

5. 请求超时设置

javascript
axios.get('/api/data', { timeout: 5000 });

6. 支持请求进度监控

javascript
axios.post('/api/upload', formData, {
  onUploadProgress: (progressEvent) => {
    const percentCompleted = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    );
  }
});

7. 浏览器和 Node.js 兼容

浏览器端基于 XMLHttpRequest
Node.js 端基于 http 模块

8. 支持 CSRF 保护

javascript
axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = 'X-CSRFToken';

总结

特性	Axios	Fetch API
JSON 自动转换	✅	❌
拦截器	✅	❌
请求取消	✅	✅ (AbortController)
超时设置	✅	❌
进度监控	✅	❌
浏览器兼容	IE11+	现代浏览器
体积	~13KB	原生支持

Axios 适合需要复杂 HTTP 处理的场景，而 Fetch API 适合简单的请求场景。