Fetch API 是基于 Promise 的现代网络请求接口,语法简洁、支持 async/await;默认不带 Cookie,需显式配置 credentials;仅网络错误才 reject,HTTP 错误需手动检查;通过 AbortController 可中断请求。

Fetch API 是 JavaScript 中用于发起网络请求的现代接口,它基于 Promise,语法简洁、逻辑清晰,比传统的 XMLHttpRequest(XHR)更易用、更符合当前开发习惯。
Fetch 更简洁,写法更直观
Fetch 使用函数式调用,直接传入 URL 和配置对象,返回 Promise,天然支持 async/await;而 XHR 需要手动创建实例、监听事件、处理状态码,步骤繁琐。
- Fetch 示例:fetch('/api/data').then(res => res.json()).then(data => console.log(data))
- XHR 示例:需 new XMLHttpRequest()、设置 onreadystatechange、检查 readyState 和 status,再手动解析响应体
Fetch 默认不带 Cookie,需显式配置
Fetch 默认不会发送或接收 cookies(即 credentials: 'omit'),这对安全是默认保障;而 XHR 默认会携带当前域 Cookie(类似浏览器自动行为)。
- 如需发送 Cookie,Fetch 必须写:fetch(url, { credentials: 'include' })
- 否则跨域请求可能因缺少认证信息而失败,这点容易被忽略
Fetch 的错误处理逻辑不同
Fetch 只有在网络彻底失败(如断网、DNS 错误)时才 reject Promise;HTTP 状态码如 404、500 仍算“成功”,需手动检查 response.ok 或 response.status。
立即学习“Java免费学习笔记(深入)”;
- 这意味着 fetch('/404').then(...) 依然会进 then,不是 catch
- XHR 则靠监听 error 事件或判断 status 来区分失败类型,逻辑更分散
Fetch 原生不支持请求中断,但可配合 AbortController
早期 Fetch 没有类似 XHR.abort() 的直接取消方式,但现在可通过 AbortController 实现优雅中断:
- 创建控制器:const controller = new AbortController()
- 传入 signal:fetch(url, { signal: controller.signal })
- 随时调用 controller.abort() 终止请求
基本上就这些。Fetch 不是 XHR 的简单替代,而是设计哲学不同的新方案——它更专注、更函数式,也更依赖开发者主动处理边界情况。用熟了反而更可控、更少“隐藏行为”。











