Fetch与XHR网络请求对比解析

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《JavaScript网络请求：Fetch与XHR对比优势解析》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

Fetch API 并未完全替代 XMLHttpRequest，因其在 cookie 发送（需显式 credentials: 'include'）、错误处理（4xx/5xx 不 reject）、上传进度监听（不支持）、超时控制（需 AbortController 模拟）等方面存在短板，复杂场景仍需 XMLHttpRequest 或封装库。

Fetch API 比 XMLHttpRequest 更简洁、更符合现代 JS 习惯，但不是“完全替代”——它在错误处理、上传进度、取消请求等场景下有明显短板，需搭配 AbortController 或第三方库补足。

fetch 默认不带 cookie，XMLHttpRequest 默认带（取决于 withCredentials）

这是最常踩的坑：用 fetch 发请求时，即使用户已登录，后端收不到 session cookie，导致 401。

• fetch 必须显式传 { credentials: 'include' } 才会发送 cookie
• XMLHttpRequest 在同域下默认发送 cookie；跨域时需手动设 xhr.withCredentials = true
• 若后端是 Express + cors({ credentials: true })，前端漏掉 credentials: 'include' 就一定失败

fetch('/api/user', {
  credentials: 'include' // 必须写！否则 cookie 不发
})

fetch 不把 4xx/5xx 当作 reject，XMLHttpRequest 的 onerror 也不捕获它们

fetch 只在网络断开、DNS 失败、被 CORS 阻止等真正“请求没发出去”时才 reject；HTTP 状态码 400、500 都算“成功”，得靠 response.ok 或 response.status 手动判断。

• XMLHttpRequest 同样不会因 404 自动触发 onerror，也得检查 xhr.status
• 区别在于：fetch 的 Promise 链容易让人误以为“没报错=成功”，结果漏处理业务错误
• 建议统一加一层封装，自动 throw 错误

async function safeFetch(url, options = {}) {
  const res = await fetch(url, options);
  if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
  return res;
}

fetch 不支持上传进度监听，XMLHttpRequest 支持 upload.onprogress

做大文件上传时，fetch 没法原生获取上传百分比；而 XMLHttpRequest 的 xhr.upload.onprogress 是稳定可用的。

• 目前唯一标准方案是用 XMLHttpRequest 处理上传，fetch 处理普通请求
• 社区有 fetch-upload-progress 这类包装库，但本质仍是用 XMLHttpRequest 实现
• Chrome 126+ 开始实验 ReadableStream 上传，但兼容性极差，不可用于生产

fetch 没有内置超时，XMLHttpRequest 有 timeout 属性

fetch 本身不提供 timeout 参数，必须靠 AbortController + setTimeout 模拟：

• XMLHttpRequest.timeout = 5000 是原生支持，简单直接
• fetch 要写更多代码，且 AbortController 无法区分是超时还是用户主动取消
• 注意：AbortController.abort() 后，fetch Promise 会以 AbortError reject，需专门 catch

const controller = new AbortController();
setTimeout(() => controller.abort(), 5000);

try {
  const res = await fetch('/api/data', { signal: controller.signal });
} catch (err) {
  if (err.name === 'AbortError') console.log('请求超时');
}

真正用起来，fetch 的语法糖优势只在简单 GET/POST 场景明显；一旦涉及上传、超时、cookie、重试、拦截，XMLHttpRequest 或 axios 这类封装库反而更稳——别迷信“新就是好”。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Fetch与XHR网络请求对比解析》文章吧，也可关注golang学习网公众号了解相关技术文章。