掌握Axios：前端HTTP请求全攻略

Axios 使用详解

简介与核心特性

Axios 是一个基于 Promise 的 HTTP 客户端，专为浏览器和 Node.js 设计。其核心特性包括支持请求/响应拦截、自动转换 JSON 数据、取消请求、并发请求管理以及客户端 XSRF 防护。与原生 Fetch API 相比，Axios 提供了更简洁的 API 设计和更完善的错误处理机制。

安装与基础配置

在项目中安装 Axios 可通过 npm 或 yarn 完成：

bash 复制代码

npm install axios
# 或
yarn add axios

基础配置包含全局默认值设定，例如设置基础 URL 和超时时间：

javascript 复制代码

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 5000;
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

请求方法与参数处理

Axios 支持所有 HTTP 方法，常用请求示例：

javascript 复制代码

// GET 请求
axios.get('/user', { params: { id: 123 } });

// POST 请求
axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' });

// 并发请求
axios.all([axios.get('/foo'), axios.get('/bar')]);

参数处理包含以下要点：

params 对象自动转换为 URL 查询字符串
POST 请求体默认以 JSON 格式发送
可通过 transformRequest 自定义请求数据转换

响应结构解析

标准响应包含以下字段：

javascript 复制代码

{
  data: {},       // 服务端返回数据
  status: 200,    // HTTP 状态码
  statusText: 'OK',
  headers: {},    // 响应头
  config: {},     // 请求配置
  request: {}     // 底层 XMLHttpRequest 对象
}

错误响应处理需区分 HTTP 状态错误和网络错误：

javascript 复制代码

axios.get('/user/123')
  .catch(error => {
    if (error.response) {
      console.log(error.response.status); // 4xx/5xx 错误
    } else if (error.request) {
      console.log('未收到响应'); // 请求已发出但无响应
    } else {
      console.log('请求配置错误', error.message);
    }
  });

高级功能应用

拦截器机制

请求与响应拦截器典型应用场景：

javascript 复制代码

// 请求拦截器
axios.interceptors.request.use(config => {
  config.headers['X-Custom-Header'] = 'foobar';
  return config;
});

// 响应拦截器
axios.interceptors.response.use(
  response => response.data, // 仅返回数据字段
  error => Promise.reject(error.response.data) // 统一错误格式
);

取消请求

基于 CancelToken 的实现方案：

javascript 复制代码

const source = axios.CancelToken.source();

axios.get('/user/123', { cancelToken: source.token })
  .catch(thrown => {
    if (axios.isCancel(thrown)) {
      console.log('请求已取消', thrown.message);
    }
  });

source.cancel('用户主动取消操作');

文件上传处理

结合 FormData 实现文件上传：

javascript 复制代码

const formData = new FormData();
formData.append('file', fileInput.files[0]);

axios.post('/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' }
});

实例管理与封装建议

创建独立实例适用于多端点场景：

javascript 复制代码

const api = axios.create({
  baseURL: 'https://api.example.com/v2',
  timeout: 10000
});

// 实例专属拦截器
api.interceptors.request.use(authInterceptor);

推荐封装模式包含以下要素：

统一错误处理层
业务状态码二次校验
请求重试机制
类型声明文件（TypeScript）

性能优化策略

请求缓存实现

内存缓存示例：

javascript 复制代码

const cache = new Map();

async function cachedGet(url) {
  if (cache.has(url)) return cache.get(url);
  const res = await axios.get(url);
  cache.set(url, res.data);
  return res.data;
}

并发控制

通过 axios.all 与 Promise.allSettled 结合实现：

javascript 复制代码

const requests = ['/url1', '/url2'].map(url => axios.get(url));
const results = await Promise.allSettled(requests);
const successfulData = results
  .filter(p => p.status === 'fulfilled')
  .map(p => p.value.data);

安全防护措施

CSRF 防护需配合服务端设置：

javascript 复制代码

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

JWT 认证的典型实现：

javascript 复制代码

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

测试调试技巧

Mock 数据方案推荐使用 axios-mock-adapter：

javascript 复制代码

const mock = new MockAdapter(axios);
mock.onGet('/users').reply(200, { users: [{ id: 1 }] });

开发环境日志输出配置：

javascript 复制代码

axios.interceptors.request.use(config => {
  console.log('Outgoing Request:', config.method, config.url);
  return config;
});

axios.interceptors.response.use(response => {
  console.log('Incoming Response:', response.status, response.data);
  return response;
});

浏览器兼容方案

针对旧版浏览器需添加 polyfill：

javascript 复制代码

// 需额外安装 core-js 和 regenerator-runtime
import 'core-js/stable';
import 'regenerator-runtime/runtime';

XHR 降级处理（适用于特殊环境）：

javascript 复制代码

const transport = typeof XMLHttpRequest !== 'undefined' ? 
  axios : 
  require('axios/lib/adapters/http');

TypeScript 集成指南

完整类型声明示例：

typescript 复制代码

interface User {
  id: number;
  name: string;
}

axios.get<User>('/user/1').then(response => {
  console.log(response.data.name); // 自动类型推断
});

自定义配置类型扩展：

typescript 复制代码

declare module 'axios' {
  interface AxiosRequestConfig {
    metadata?: { startTime: number };
  }
}

服务端渲染适配

Node.js 环境特殊配置项：

javascript 复制代码

const axios = require('axios').create({
  adapter: require('axios/lib/adapters/http'),
  proxy: { host: '127.0.0.1', port: 9000 }
});

SSR 场景下的 Cookie 传递：

javascript 复制代码

const serverAxios = axios.create({
  headers: { Cookie: req.headers.cookie }
});

替代方案对比分析

与 Fetch API 的核心差异：

自动 JSON 数据转换
请求进度监控支持
更完善的错误分类
向后兼容性处理

适用场景决策树：

需要取消请求 → 选择 Axios
需要最小化依赖 → 选择 Fetch
复杂拦截需求 → 选择 Axios
需要 Stream 处理 → 选择 Fetch

版本升级注意事项

从 0.x 迁移到 1.x 主要变更点：

CancelToken 替换为 AbortController
默认导出方式变更
TypeScript 定义结构调整

向后兼容性策略：

javascript 复制代码

// 双版本兼容方案
const axios = window.axios || require('axios@0.27');

常见问题排查

跨域问题处理

完整解决方案需包含：

CORS 服务端配置
开发环境代理设置
withCredentials 配置项

Content-Type 自动设置

手动覆盖示例：

javascript 复制代码

axios.post('/form', qs.stringify(data), {
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});

扩展阅读推荐

进阶学习资料：

Axios 官方 GitHub 仓库的 Interceptors 文档
RFC 7231 HTTP 协议规范
RESTful API 设计指南