javascript中的Fetch API是什么_它与传统的XMLHttpRequest有什么区别

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。

• 这意味着 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 的简单替代，而是设计哲学不同的新方案——它更专注、更函数式，也更依赖开发者主动处理边界情况。用熟了反而更可控、更少“隐藏行为”。