fetch轻量但缺cookie、无拦截、需手动处理HTTP错误;axios开箱即用、默认报错、支持拦截器和取消请求,但体积大且需注意CORS配置。

没有“哪个更好用”的绝对答案,只有“哪个更合适”——fetch 是浏览器原生 API,轻量但缺省功能多;axios 是第三方库,开箱即用但要额外加载。
fetch 默认不带 cookie,跨域请求容易 401 或 403
这是最常踩的坑:默认情况下 fetch 不发送 Cookie,服务端鉴权失败就返回未授权。必须显式加 credentials 选项:
fetch('/api/user', {
method: 'GET',
credentials: 'include' // 或 'same-origin'、'omit'
})
axios 默认行为不同:它默认不发 cookie,但只要配 withCredentials: true 就生效,逻辑更直觉。不过要注意,withCredentials: true 时后端响应头必须包含 Access-Control-Allow-Origin 具体域名(不能是 *),否则浏览器直接拦截。
fetch 没有内置请求/响应拦截,错误处理要手动展开
fetch 只在真正网络失败(如断网、DNS 错)时 reject,HTTP 状态码 4xx/5xx 仍走 resolve,你得自己检查 response.ok 或 response.status:
立即学习“Java免费学习笔记(深入)”;
fetch('/api/data')
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.catch(err => console.error(err));
axios 默认把 4xx/5xx 当作错误抛出,catch 里能直接拿到响应对象和状态码,也支持全局配置 validateStatus 自定义判定逻辑。如果项目里大量接口需要统一鉴权失败跳转、loading 状态控制或日志打点,axios 的拦截器(axios.interceptors.request.use / .response.use)会省掉很多重复判断。
axios 支持取消请求,fetch 需要 AbortController(且兼容性有要求)
用户快速切换页面或输入搜索关键词时,旧请求应被取消。axios 原生支持 CancelToken(旧版)或 AbortController(v0.22+),而 fetch 必须用 AbortController,且 IE 完全不支持,iOS Safari 12.2+ 才开始稳定支持:
-
fetch(url, { signal: controller.signal })+controller.abort() -
axios.get(url, { signal: AbortSignal.timeout(5000) })(v1.2+ 支持超时信号)
如果你的项目还要兼容老版本 iOS 或需要细粒度控制超时、重试(比如 axios-retry 插件),axios 的生态支持更成熟。
体积和现代开发场景的实际取舍
纯静态站点、渐进增强脚本、或已用 ESBuild/Vite 做 tree-shaking 的项目,fetch 零依赖、无打包成本;但若已引入 Vue/React 生态,axios 的 Promise 风格、自动 JSON 解析、CSRF token 自动注入(配合 xsrfCookieName)反而减少胶水代码。注意:axios 默认不支持 Request/Response 对象(如 new Request() 构造),做 PWA 缓存或 Service Worker 代理时,fetch 更底层可控。
真正难的不是选哪个,而是别混用——同一项目里同时维护两套请求逻辑,出问题时连日志格式都对不上。











