Fetch与XMLHttpRequest区别详解

本文深入对比了 JavaScript 中两种主流网络请求方式——现代的 fetch API 与传统的 XMLHttpRequest（XHR），清晰指出 fetch 语法简洁、基于 Promise、天然适配 async/await，是新项目的首选，但需手动处理 HTTP 错误、超时和 Cookie；而 XHR 虽写法冗长、回调风格陈旧，却在兼容性、原生超时控制、上传进度监听和细粒度中断等方面更具优势。无论你是想快速上手现代开发，还是应对老旧浏览器或复杂交互场景，这篇文章都为你提供了实用的选型依据和关键差异速查，助你做出更明智的技术决策。

用 JavaScript 发起网络请求，现在最推荐的方式是 fetch API；它比传统的 XMLHttpRequest（XHR） 更简洁、更符合现代 JavaScript 的设计逻辑。两者都能发请求，但写法、错误处理、默认行为和兼容性差异挺大。

fetch API：更现代、基于 Promise

fetch 是浏览器原生提供的、基于 Promise 的接口，语法干净，天然支持 async/await：

• 默认只拒绝网络错误（如断网），404、500 这类 HTTP 错误不会触发 catch，需要手动检查 response.ok 或 response.status
• 不支持原生超时控制（需配合 AbortController 实现）
• 默认不带 cookie，如需携带要显式加 credentials: 'include'
• 上传文件、发送 JSON 数据都很直观，比如：
  fetch('/api/user', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(data) })

XMLHttpRequest：更底层、回调风格

XHR 是老标准，功能全但写法冗长，依赖事件监听和回调：

• 有明确的 readyState 变化过程（0–4），适合需要精细控制加载状态的场景（比如进度条）
• 原生支持超时设置（xhr.timeout = 5000）和取消（xhr.abort()）
• 默认会携带 cookie（同源时），行为更接近传统表单提交
• 处理响应需手动解析：xhr.responseType = 'json' 或 JSON.parse(xhr.responseText)

关键区别速查

• 错误处理：fetch 对 HTTP 错误静默成功；XHR 的 onerror 只在真正网络失败时触发，HTTP 状态码需自己判断
• 中断请求：fetch 需靠 AbortController；XHR 直接调 .abort()
• 兼容性：fetch 在 IE 中完全不支持（需 polyfill）；XHR 所有浏览器都支持
• 流式读取：fetch 支持 response.body.getReader() 流式处理大响应；XHR 不支持

什么时候选哪个？

• 新项目、简单 CRUD 请求 → 优先用 fetch + async/await
• 需要上传进度、兼容 IE、或必须用超时/中止等细粒度控制 → XMLHttpRequest 更稳妥
• 想兼顾现代语法与健壮性？可封装 fetch，自动检查 response.ok、添加超时逻辑、统一错误抛出

基本上就这些。fetch 更轻快，XHR 更可控——选哪个，看你的需求和兼容要求就行。

到这里，我们也就讲完了《Fetch与XMLHttpRequest区别详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！