fetch是原生API，轻量但需手动处理JSON、错误状态和Cookie；axios是封装库，自带拦截器、自动JSON解析、统一错误处理及更好兼容性，适合中大型项目。

JavaScript 与后端通信最常用的方式是通过 HTTP 请求，fetch 和 axios 是两种主流选择。它们都能发起 GET、POST 等请求，但设计目标、默认行为和使用习惯有明显差异。

原生 vs 封装：基础定位不同

fetch 是浏览器原生提供的 API，无需引入额外库，属于 Web 标准的一部分；axios 是第三方 JavaScript 库，需通过 npm 安装或 CDN 引入。

• fetch 在现代浏览器中基本可用（IE 不支持，需 polyfill）
• axios 兼容性更好（支持 IE11），且在 Node.js 环境中也能运行（配合 axios 的服务端版本）
• fetch 更轻量，适合简单场景；axios 功能更全，适合中大型项目

错误处理逻辑不一样

fetch 只在网络故障时 reject，HTTP 状态码如 404、500 不会触发 catch；而 axios 默认把非 2xx 状态码也视为错误，直接进入 catch。

• 用 fetch 时需手动检查 response.ok 或 response.status
• axios 的 error 对象里包含 response.data、response.status 等字段，调试更方便
• 例如：服务器返回 401，fetch 仍走 then 分支，axios 直接进 catch

默认功能支持程度不同

axios 开箱即用的功能更多，fetch 往往需要手动配置。

• 请求/响应拦截器：axios 原生支持；fetch 需自行封装或借助中间层
• 自动 JSON 解析：axios 默认解析响应体为 JSON；fetch 需显式调用 response.json()
• 请求取消：axios 用 CancelToken 或 AbortController（新版本）；fetch 原生支持 AbortController
• 超时控制：axios 可直接设 timeout: 5000；fetch 没有原生 timeout，需配合 AbortController 实现

请求配置写法和灵活性

fetch 的配置项较底层，比如设置 Content-Type、发送 FormData、处理 Cookie，都需要明确指定；axios 的默认行为更“贴心”。

• fetch 发送 JSON 时要手动加 headers 和 JSON.stringify()；axios 传对象自动序列化并设 header
• credentials（Cookie）：fetch 默认不带 Cookie，需设 credentials: 'include'；axios 默认是 'same-origin'，更安全
• 上传进度：axios 支持 onUploadProgress；fetch 需依赖 XMLHttpRequest 或流式读取（较复杂）

选哪个取决于项目需求：轻量、可控、想贴近标准，用 fetch；追求开发效率、统一拦截、多端兼容，axios 更省心。实际项目中两者并不互斥，可共存——比如核心模块用 fetch，文件上传用 axios。