详细介绍：Axios 全面详解

一、Axios 是什么？

Axios 是一个轻量级的 HTTP 请求库，用来发送网络请求（GET、POST、PUT、DELETE 等），底层基于：

• 浏览器环境： 使用 XMLHttpRequest

• Node.js 环境： 使用 http 模块

相比原生的 fetch() 或 XMLHttpRequest：

• 语法更简洁

• 支持请求/响应拦截

• 支持自动 JSON 转换

• 支持请求取消

• 支持并发控制

• 兼容旧浏览器

---

⚙️ 二、安装与引入

# npm 安装
npm install axios
# yarn 安装
yarn add axios

在前端项目中使用：

import axios from 'axios';

在 Node.js 中也可以直接使用：

const axios = require('axios');

---

三、基础用法

1️⃣ GET 请求

axios.get('https://api.example.com/users', {
  params: { id: 123 }  // ?id=123
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

2️⃣ POST 请求

axios.post('https://api.example.com/login', {
  username: 'admin',
  password: '123456'
})
.then(res => console.log(res.data))
.catch(err => console.error(err));

3️⃣ 并发请求

axios.all([
  axios.get('/user'),
  axios.get('/comments')
]).then(axios.spread((user, comments) => {
  console.log(user.data, comments.data);
}));

---

四、常见配置项（axios config）

Axios 的第二个参数可以传一个配置对象：

axios({
  method: 'post',
  url: '/user/12345',
  data: { name: 'Tom' },
  headers: { 'Authorization': 'Bearer token' },
  timeout: 5000,
  responseType: 'json',  // 支持 arraybuffer, blob, document, json, text, stream
});

常用配置项说明：

配置项	说明
url	请求地址
method	请求方法（get、post、put、delete 等）
baseURL	设置统一的基础路径
headers	自定义请求头
params	URL 查询参数（GET 参数）
data	请求体数据（POST 数据）
timeout	超时时间（毫秒）
responseType	响应数据类型
auth	基础认证 {username, password}
withCredentials	是否跨域时携带 cookie

---

五、拦截器机制（Interceptor）

Axios 提供了两类拦截器：请求拦截器 与 响应拦截器。

1️⃣ 请求拦截器

可以在请求发出前做统一处理，比如添加 Token。

axios.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) config.headers.Authorization = `Bearer ${token}`;
    return config;
  },
  error => Promise.reject(error)
);

2️⃣ 响应拦截器

可以统一处理返回结果或错误。

axios.interceptors.response.use(
  response => {
    // 返回数据前的处理
    return response.data;
  },
  error => {
    if (error.response && error.response.status === 401) {
      console.log('未授权，请重新登录');
    }
    return Promise.reject(error);
  }
);

---

六、创建 Axios 实例（常用于项目封装）

const service = axios.create({
  baseURL: 'https://api.example.com/',
  timeout: 8000
});
service.interceptors.request.use(config => {
  // 统一添加 token
  config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
  return config;
});
service.interceptors.response.use(res => res.data);
export default service;

使用时：

import service from './request';
service.get('/user').then(data => console.log(data));

---

七、错误处理

Axios 会在请求失败时返回一个 error 对象，可通过以下方式判断：

axios.get('/api')
  .catch(error => {
    if (error.response) {
      console.log('服务器返回错误状态码：', error.response.status);
    } else if (error.request) {
      console.log('请求已发送但未收到响应');
    } else {
      console.log('请求设置错误：', error.message);
    }
  });

---

⚡ 八、取消请求

通过 AbortController（或旧版的 CancelToken）可以中止请求。

const controller = new AbortController();
axios.get('/long-request', { signal: controller.signal })
  .catch(e => console.log('请求被取消'));
controller.abort();  // 主动取消请求

---

九、Axios 原理简析

Axios 的核心机制：

1. 创建实例（axios.create）

   • 实际是创建一个带有默认配置的 Axios 对象。

2. 请求调度器（dispatchRequest）

   • 判断当前环境（浏览器 or Node）

   • 分别使用 XMLHttpRequest 或 http.request() 发送请求

3. 拦截器链（InterceptorManager）

   • 请求拦截器 → 发请求 → 响应拦截器

   • 内部通过 Promise 链式调用 实现拦截与传递。

请求链路：
request interceptors → dispatch request → response interceptors

---

十、常见高级技巧

功能	示例
设置全局默认配置	axios.defaults.baseURL = '/api'
设置全局 headers	axios.defaults.headers.common['Authorization'] = token
文件上传	axios.post('/upload', formData, { headers: {'Content-Type': 'multipart/form-data'} })
文件下载	axios.get('/file', { responseType: 'blob' })
超时重试	配合 axios-retry 插件
并发控制	用 Promise.all 或队列机制管理

---

十一、与 Fetch 的区别

特性	Axios	Fetch
兼容性	IE11 可用	IE 不支持
超时控制	支持	需手动实现
拦截器	有	无
自动 JSON 转换	有	需手动调用 .json()
取消请求	内置支持	需 AbortController
上传/下载进度	支持	较麻烦

---

✅ 十二、小结

优点	缺点
API 简洁	体积比 fetch 略大
支持拦截器	某些错误类型不易捕获
支持并发与取消	不支持流式响应
支持浏览器 + Node	—