5月29日 22:54

axios 和 fetch 有什么区别?什么时候该用 axios 而非 fetch?

axios 和 fetch 的核心区别在 错误处理、拦截器、请求取消、数据转换、兼容性 五个方面。

错误处理: fetch 只有网络故障才 reject,HTTP 4xx/5xx 仍走 resolve,需手动检查 response.ok;axios 自动将 4xx/5xx 转为 reject,错误处理更符合直觉。

拦截器: axios 内建请求/响应拦截器,统一添加 Token、处理错误码;fetch 无拦截器,需手动包装或用第三方库。

请求取消: axios 支持 CancelToken 和 AbortController;fetch 只支持 AbortController。axios 的超时配置(timeout)是内建的,fetch 需自己用 AbortController + setTimeout 实现。

数据转换: axios 自动 JSON 转换(请求时 stringify、响应时 parse);fetch 需手动调用 response.json()。axios 自动处理 URL 编码和 FormData。

兼容性: fetch 是浏览器原生 API,无依赖;axios 约 13KB gzipped。fetch 在旧浏览器需 polyfill(如 whatwg-fetch)。

选 axios 的场景: 需要拦截器、自动错误处理、超时控制、请求/响应转换、取消请求。选 fetch 的场景: 追求零依赖、简单请求、Service Worker 中使用、项目已在用 SWR/React Query 等上层库。

追问:

  1. fetch 的 credentials: 'include' 和 axios 的 withCredentials: true 行为是否一致?
  2. fetch 如何实现和 axios 拦截器类似的功能?
  3. 在 Service Worker 中为什么推荐用 fetch 而非 axios?
  4. axios 的响应拦截器能拿到原始的 Response 对象吗?
  5. React Query 或 SWR 底层用的是 axios 还是 fetch?能切换吗?
标签:JavaScript前端Axios