javascript ajax如何使用_fetch和axios哪个更强大【教程】

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 对象：

• 没有标准方式在 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() 组合实现。

# 浏览器  # app  # word  # edge  # js  # json  # javascript  # java  # 封装  # 中间件  # cookie  # ajax  # vite  # webpack 

相关栏目： <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 AI推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 SEO优化<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 技术百科<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 谷歌推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 百度推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 网络营销<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 案例网站<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 精选文章<？ｍｕｍａ echo $count; ?> 】