Axios 干净调用完全指南：拦截器 + 独立客户端，让前端代码优雅起飞

一. 为什么要“干净”的 API 调用？→ 可读 + 可维护 = 少加班 🙅‍♂️

React / Vue 项目里随处可见的 fetch.then.then.catch 很快变成“回调地狱”。Axios 通过独立客户端、拦截器、默认配置把 HTTP 逻辑收拢到一处，平均减少 40 % 重复代码，新人上手成本降低一半。

先跑一段最小可运行代码，感受 3 秒完成带拦截器的请求 👇

import axios from 'axios';
const client = axios.create({ baseURL: 'https://api.example.com', timeout: 5000 });
client.interceptors.response.use(res => res, err => { console.error(err.response?.status); return Promise.reject(err); });
await client.get('/product');

返回 JSON 拖进「代码文档生成器」📄，10 秒生成带函数描述、可 copy-paste 的 SDK， teammates 再也不用手动补注释！

a. 立 Flag 前先立 KPI 📊

用「开发任务管理系统 KPI」把目标量化：

前端 API 调用 95 分位延迟 ≤ 300 ms
重复代码块覆盖率 ↓ 80 %
单端点维护人日 ≤ 0.3 天/月
可衡量的指标才能让老板一眼看出 ROI。

二. Axios vs Fetch：一张图看懂取舍 ⚖️

维度	Fetch	Axios
向后兼容	❌ IE 不支持	✅ XMLHttpRequest
拦截器	需手动封装	内置请求/响应拦截
默认配置	每次构造	一次 `create` 全局生效
打包体积	0 KB	≈ 13 KB (gzip)
学习曲线	原生简单	功能丰富，需配置

结论：≤ IE11 或需要拦截器/取消请求 → 选 Axios；个人小站 → Fetch 足够。

三. 5 步搭建“干净”调用链路 🛠️

安装 Axios
```
npm i axios
```
创建独立客户端 → 统一 baseURL、超时、默认头
拦截器 → 401 重定向、刷新令牌、日志脱敏
按业务分文件 → user.js product.js 单一责任
统一导出 → index.js 聚合，方便 import { getProduct } from '@/api'

不会写拦截器？用「代码生成」一句话：“生成 TypeScript 版 Axios 客户端，含 401 重定向、刷新令牌、取消请求”，AI 立即给出可运行文件，copy 即可用。

四. 实战：独立客户端 + 拦截器 + 取消令牌 🚀

// apiClient.js
import axios from 'axios';

const axiosClient = axios.create({
  baseURL: import.meta.env.VITE_API_BASE,
  timeout: 10000,
  headers: { 'Content-Type': 'application/json' }
});

// 请求拦截：自动附加令牌
axiosClient.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) config.headers.Authorization = Bearer ${token};
  return config;
});

// 响应拦截：401 重定向 + 刷新令牌
axiosClient.interceptors.response.use(
  res => res,
  async err => {
    const original = err.config;
    if (err.response?.status === 401 && !original._retry) {
      original._retry = true;
      const newToken = await refreshToken(); // 调用刷新接口
      localStorage.setItem('token', newToken);
      return axiosClient(original);
    }
    return Promise.reject(err);
  }
);

export default axiosClient;

// api/product.js
import axiosClient from '../apiClient';

export const getProduct = () => axiosClient.get('/product');
export const addProduct = (data) => axiosClient.post('/product', data);
export const cancelProduct = (id) => {
  const source = axios.CancelToken.source();
  const promise = axiosClient.delete(/product/${id}, { cancelToken: source.token });
  return { promise, cancel: () => source.cancel('User cancelled') };
};

让「代码优化」把回调改 async/await + 取消令牌，内存泄漏率↓90 % ⚡️

五. 文件夹结构：按业务拆分，保持单一责任 📁

src/

└── api/

    ├── apiClient.js      # 统一实例

    └── lib/

        ├── product.js    # 商品相关

        ├── user.js       # 用户相关

        └── order.js      # 订单相关

每个文件只暴露函数，不存放组件逻辑，做到“关注点分离”。

六. 在组件中干净地使用 🎯

import { getProduct } from '@/api/lib/product';

const ProductList = () => {
  const [products, setProducts] = useState([]);
  useEffect(() => {
    getProduct().then(res => setProducts(res.data)).catch(console.error);
  }, []);
  return <ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul>;
};

七. 挑战 & 逃生指南 🕳️

挑战	逃生术
打包体积	使用 `import axios from 'axios/dist/esm/axios.min.js'` 按需引入
重复请求	封装 `useApi` Hook，内置 debounce + 取消令牌
刷新令牌死循环	设置 `_retry` 标志位，仅重试一次
CORS 错误	开发阶段用 Vite proxy，生产环境走同源网关

写完逻辑怕有坑？一键 @「代码审查助手」🕵️，它会提示“这里缺错误边界”“未处理取消泄漏”，并给出可执行修复 patch。

八. 性能优化：取消令牌 + 缓存 + 压缩 🚀

取消令牌：组件卸载时自动取消未完成的请求，避免内存泄漏
缓存：对不变数据使用 SWR/React-Query，减少 30 % 冗余请求
gzip：服务器开启 Brotli，传输体积↓70 %

让「代码优化」把轮询改 SWR，首屏加载时间↓40 % ⚡️

九. 未来趋势：Axios + 低代码 + AI 🧠

低代码平台直接导入 OpenAPI 规范，自动生成 Axios 函数
GitHub Copilot 根据注释生成带拦截器的完整客户端
领域大模型分析 Axios 日志，自动给出性能优化建议

十、最佳实践 & 常见陷阱 ✅/❌

最佳实践

每个函数单一责任，拒绝“万能 API 工具类”
监控 X-Rate-Limit-Remaining，提前告警
对敏感数据启用字段级加密，日志脱敏

常见陷阱

忽略取消令牌：组件卸载仍在 setState → 内存泄漏 |
全局基础 URL 硬编码：上线后换环境需全量替换 |
日志缺失：无 requestId，出错无法追踪 |

十一、结论：干净的 Axios 调用是前端代码的“清新剂” 🏁

从独立客户端、拦截器到取消令牌，一站式模板让团队在“前端马拉松”中稳占先机；再用「代码文档生成器」自动生成 SDK 文档，外部开发者 5 分钟就能上手。

注意：Axios 版本与浏览器兼容策略会随社区更新，上线前请查阅官方 Release Note。

原文链接: https://daily.dev/blog/a-guide-to-writing-clean-api-calls-using-axios