fetch是原生API,轻量无依赖但需手动处理cookie、拦截、JSON序列化等;axios是第三方库,开箱即用支持默认带cookie、请求响应拦截、自动JSON解析、更好兼容性及超时取消等高级功能。

fetch 和 axios 都能发请求,但它们定位不同:fetch 是浏览器原生 API,轻量、无依赖;axios 是第三方库,封装更全、默认行为更贴近实际开发需求。选哪个不看“谁更强大”,而要看你是否愿意自己补足 fetch 缺失的常用能力。
fetch 默认不带 cookie,axios 默认带(但需配置)
这是最常踩的坑。fetch 发送请求时,默认 credentials 是 'omit',即不自动携带 Cookie,即使后端已设 withCredentials: true 也不行:
fetch('/api/user', {
credentials: 'include' // 必须显式写这一行
})
axios 默认行为是不发送 Cookie,但只需一次全局配置就能改:
axios.defaults.withCredentials = true
常见错误现象:401 Unauthorized 或登录态丢失 —— 很可能就是忘了设 credentials 或 withCredentials。
立即学习“Java免费学习笔记(深入)”;
fetch 没有内置请求/响应拦截,axios 支持中间件式拦截
比如统一加 token、记录耗时、错误分类处理,axios 可直接用:
axios.interceptors.request.use(config => {
config.headers.Authorization = `Bearer ${token}`;
return config;
});
fetch 要实现类似逻辑,得手动封装函数,每次调用都得包一层,且无法在发起前或响应后“劫持”原始 request/response 对象:
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。它不是新的编程语言,而是一种使用现有标准的新方法,最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容,不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。《php中级教程之ajax技术》带你快速
- 没有标准方式在 fetch 发出前修改 headers 或 body
- 响应体必须手动
.json()、.text(),不能像 axios 那样自动根据Content-Type推断 - 网络失败(如断网)和 HTTP 错误(如 404、500)都走
catch,需手动检查response.ok
axios 自动做 JSON 序列化和解析,fetch 全靠手写
用 fetch 发 POST JSON 请求,必须手动设置 header 并调用 JSON.stringify:
fetch('/api/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password })
})
axios 会自动处理:
axios.post('/api/login', { username, password }) // 自动序列化 + 设 header
反过来,响应解析也更省心:axios 默认把 JSON 响应转成 JS 对象;fetch 必须显式调用 response.json(),且这个操作本身会抛错(比如返回空体或非 JSON 内容)。
兼容性与体积差异直接影响选型
fetch 在 IE 完全不支持,连 polyfill(如 whatwg-fetch)也无法覆盖所有 Edge 旧版本;axios 支持 IE11(需 Promise polyfill)。
体积方面:axios min+gzip 后约 5KB,fetch 是浏览器自带,零体积 —— 如果项目已用 webpack/vite 且对包大小敏感,又只支持现代浏览器,fetch 更干净;如果要快速上线、兼容老环境、团队协作频繁,axios 的开箱即用省下的调试时间远超那几 KB。
真正复杂的地方不在语法,而在边界:超时控制、取消请求、上传进度、自动重试 —— axios 内置 AbortController 兼容方案和 cancelToken(v0.22+ 已弃用,转向 AbortSignal),fetch 虽原生支持 AbortSignal,但超时仍需手动 setTimeout + AbortController.abort() 组合实现。










