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 等上层库。
追问:
- fetch 的
credentials: 'include'和 axios 的withCredentials: true行为是否一致?- fetch 如何实现和 axios 拦截器类似的功能?
- 在 Service Worker 中为什么推荐用 fetch 而非 axios?
- axios 的响应拦截器能拿到原始的 Response 对象吗?
- React Query 或 SWR 底层用的是 axios 还是 fetch?能切换吗?