当前位置：首页 > 文章列表 > 文章 > 前端 > Fetch与Axios怎么选？JavaScript请求详解

Fetch与Axios怎么选？JavaScript请求详解

2026-03-27 22:58:42 0浏览收藏

在JavaScript中选择Fetch还是Axios并非简单的“原生vs第三方”之争，而是关乎项目规模、维护成本与开发体验的务实权衡：Fetch轻量无依赖、适合静态页面或微前端等极简场景，但需手动处理超时、错误状态、Cookie、取消请求和JSON序列化等常见痛点；Axios则以开箱即用的拦截器、自动错误reject、内置超时与CancelToken、SSR友好及更直观的TypeScript泛型显著提升中大型应用的开发效率与一致性。真正关键的不是工具本身，而是建立分层错误处理（网络异常→HTTP异常→业务异常）和混合使用策略——用Fetch承载低频无副作用请求，用Axios封装核心业务接口并统一管理鉴权、loading与重试逻辑，让技术选型服务于长期可维护性而非短期流行度。

JavaScript如何发起HTTP请求_Fetch与Axios该如何选择

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

理论要掌握，实操不能落！以上关于《Fetch与Axios怎么选？JavaScript请求详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！