JavaScript如何发起HTTP请求_Fetch与Axios该如何选择_技术教程

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: '余额不足' }）应分层捕获，无论用哪个库，这一层抽象通常得自己补。