axios 和 fetch 有什么区别？什么时候该用 axios？

axios 是基于 Promise 的 HTTP 客户端，相比原生 fetch 的核心优势在于：请求/响应拦截器（统一添加 token、错误处理）、自动 JSON 转换（fetch 需手动 .json()）、请求超时配置（fetch 需封装 AbortController+setTimeout）、上传进度监控、XSRF 防护，以及 4xx/5xx 自动 reject（fetch 只在网络故障时才 reject）。但 fetch 是浏览器原生 API，零体积开销，且正逐步补齐能力（AbortController 已支持取消）。

追问

axios 的拦截器机制是怎么实现的？ 内部维护请求和响应两个拦截器数组（数组链），发送请求时按序执行请求拦截器，收到响应后按序执行响应拦截器，本质是 Promise 链式调用。

fetch 如何实现请求超时？ 用 AbortController 创建 signal，配合 setTimeout 调用 controller.abort()，fetch 接收 signal 参数，超时后抛出 AbortError。axios 直接配置 timeout 字段即可。

axios 在浏览器和 Node.js 端分别用什么发送请求？ 浏览器端基于 XMLHttpRequest，Node.js 端基于 http/https 模块，通过适配器模式统一 API。fetch 在 Node 18+ 才原生支持。

axios 如何实现 XSRF 防护？ 读取指定 cookie（默认 XSRF-TOKEN）的值，自动写入请求头（默认 X-XSRF-TOKEN），配合后端双重 cookie 验证机制防跨站请求伪造。

写段代码

javascript
const instance = axios.create({
  baseURL: '/api',
  timeout: 5000,
});
instance.interceptors.request.use(cfg => {
  cfg.headers.Authorization = `Bearer ${token}`;
  return cfg;
});
instance.interceptors.response.use(
  res => res.data,
  err => { if (err.response?.status === 401) redirectToLogin(); }
);