17370845950

Fetch 默认不处理HTTP错误状态码，需手动检查response.ok；Axios默认将4xx/5xx视为错误并reject，且内置超时、拦截器、自动JSON序列化等能力。

Fetch API 基本用法与常见陷阱

Fetch 是浏览器原生支持的 Promise 风格 HTTP 客户端，无需额外安装，但默认不带请求超时、自动重试、取消请求等能力。fetch() 返回的 Promise 只有在网络错误（如断网）时才 reject，HTTP 状态码 404、500 等仍会 resolve，必须手动检查 response.ok 或 response.status。

• 忘记检查 response.ok 导致 4xx/5xx 被当成成功处理
• fetch() 不会自动携带 cookie，需显式传 { credentials: 'include' }
• 不能直接取消请求，需配合 AbortController 实现
• 没有内置请求体序列化逻辑，POST 发送 JSON 时要手动 JSON.stringify() 并设置 Content-Type

const controller = new AbortController();
fetch('/api/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ id: 123 }),
  signal: controller.signal
})
.then(r => {
  if (!r.ok) throw new Error(`HTTP ${r.status}`);
  return r.json();
})
.catch(err => {
  if (err.name === 'AbortError') console.log('请求已取消');
});

Axios 的核心优势与配置要点

Axios 是基于 Promise 的第三方 HTTP 客户端，Node.js 和浏览器均可运行，对开发体验做了大量封装。它默认将 4xx/5xx 状态码视为错误并 reject，自动序列化/解析 JSON，支持请求/响应拦截器、全局默认配置、超时控制和取消机制（通过 CancelToken 或 AbortController）。

• 默认超时是 0（永不超时），务必显式设置 timeout: 10000
• 拦截器中修改 config 后，必须返回该 config，否则请求中断
• 在 Node.js 环境下，axios.create() 实例的默认 baseURL 不会自动拼接相对路径，需确认是否以 / 开头
• 响应数据默认在 response.data 中，不是直接返回解析后的值

const api = axios.create({
  baseURL: '/api',
  timeout: 8000,
  headers: { 'X-Client': 'web' }
});

api.interceptors.request.use(config => {
  config.headers.Authorization = `Bearer ${getToken()}`;
  return config; // 忘记 return 就会卡住
});

Fetch 与 Axios 在实际项目中的取舍依据

选 Fetch 还是 Axios，取决于项目复杂度和团队约束。纯静态页面、轻量工具脚本、或需要最小化包体积（如微前端子应用）时，Fetch 更合适；中大型应用、需统一错误处理/日志/鉴权逻辑、或已有 Axios 生态（如 Vue 项目早期广泛使用）时，Axios 更省力。

• 构建产物大小：Fetch 零依赖，Axios（v1.6+）压缩后约 14KB，若用 Vite + 摇树，影响可控
• TypeScript 支持：两者都提供完整类型定义，但 Axios 的泛型写法（axios.get('/user')）更直观
• 服务端渲染（SSR）：Fetch 在 Node.js 需额外引入 node-fetch 或使用 undici，Axios 开箱即用
• 调试友好性：Axios 默认在控制台打印请求/响应摘要，Fetch 需手动加日志

现代项目中一个务实的混合策略

不必强求全栈统一。可以保留 Fetch 处理简单、低频、无副作用的请求（如埋点上报、健康检查），用 Axios 封装业务主接口，并通过自定义 Hook（React）或 Composable（Vue）统一管理 loading、error、token 刷新等逻辑。

• 避免在 Axios 中重复实现 Fetch 已有的能力（如 AbortController 取消），优先用其原生 signal 支持
• 若项目已用 fetch() 且稳定，不要仅因“Axios 更流行”而迁移；反之，若已有 Axios 实例且维护良好，也不必为了“用原生”强行替换
• 注意 Axios v1.x 默认不发送 CORS 凭据，withCredentials: true 需显式开启，而 Fetch 的 credentials: 'include' 更直白

真正容易被忽略的是错误分类处理——网络异常、HTTP 状态异常、业务逻辑异常（如后端返回 { code: 1001, msg: '余额不足' }）应分层捕获，无论用哪个库，这一层抽象通常得自己补。