javascript如何发送网络请求_fetch和axios哪个更好用【教程】-js教程-PHP中文网

fetch轻量但缺cookie、无拦截、需手动处理HTTP错误；axios开箱即用、默认报错、支持拦截器和取消请求，但体积大且需注意CORS配置。

javascript如何发送网络请求_fetch和axios哪个更好用【教程】

没有“哪个更好用”的绝对答案，只有“哪个更合适”——fetch 是浏览器原生 API，轻量但缺省功能多；axios 是第三方库，开箱即用但要额外加载。

fetch 默认不带 cookie，跨域请求容易 401 或 403

这是最常踩的坑：默认情况下 fetch 不发送 Cookie，服务端鉴权失败就返回未授权。必须显式加 credentials 选项：

fetch('/api/user', {
  method: 'GET',
  credentials: 'include' // 或 'same-origin'、'omit'
})

axios 默认行为不同：它默认不发 cookie，但只要配 withCredentials: true 就生效，逻辑更直觉。不过要注意，withCredentials: true 时后端响应头必须包含 Access-Control-Allow-Origin 具体域名（不能是 *），否则浏览器直接拦截。

fetch 没有内置请求/响应拦截，错误处理要手动展开

fetch 只在真正网络失败（如断网、DNS 错）时 reject，HTTP 状态码 4xx/5xx 仍走 resolve，你得自己检查 response.ok 或 response.status：

fetch('/api/data')
  .then(res => {
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return res.json();
  })
  .catch(err => console.error(err));

axios 默认把 4xx/5xx 当作错误抛出，catch 里能直接拿到响应对象和状态码，也支持全局配置 validateStatus 自定义判定逻辑。如果项目里大量接口需要统一鉴权失败跳转、loading 状态控制或日志打点，axios 的拦截器（axios.interceptors.request.use / .response.use）会省掉很多重复判断。

JSON Toolkit

JSON文件多功能工具。支持格式化、验证、压缩、键排序及点记法路径查询。零依赖。

下载

axios 支持取消请求，fetch 需要 AbortController（且兼容性有要求）

用户快速切换页面或输入搜索关键词时，旧请求应被取消。axios 原生支持 CancelToken（旧版）或 AbortController（v0.22+），而 fetch 必须用 AbortController，且 IE 完全不支持，iOS Safari 12.2+ 才开始稳定支持：

fetch(url, { signal: controller.signal }) + controller.abort()
axios.get(url, { signal: AbortSignal.timeout(5000) })（v1.2+ 支持超时信号）

如果你的项目还要兼容老版本 iOS 或需要细粒度控制超时、重试（比如 axios-retry 插件），axios 的生态支持更成熟。

体积和现代开发场景的实际取舍

纯静态站点、渐进增强脚本、或已用 ESBuild/Vite 做 tree-shaking 的项目，fetch 零依赖、无打包成本；但若已引入 Vue/React 生态，axios 的 Promise 风格、自动 JSON 解析、CSRF token 自动注入（配合 xsrfCookieName）反而减少胶水代码。注意：axios 默认不支持 Request/Response 对象（如 new Request() 构造），做 PWA 缓存或 Service Worker 代理时，fetch 更底层可控。

真正难的不是选哪个，而是别混用——同一项目里同时维护两套请求逻辑，出问题时连日志格式都对不上。