fetch 和 XHR 有什么区别？

fetch 和 XHR 都能在浏览器发 HTTP 请求，但 fetch 是现代 API，基于 Promise，语法更简洁。XHR 是回调时代的设计，API 复杂但老浏览器兼容性好。

关键区别：fetch 默认不携带 cookie（需要 credentials: 'include'），XHR 默认携带。fetch 只有网络错误才 reject，HTTP 404/500 算成功需要手动判断 response.ok，XHR 靠 onerror 和 status 判断。fetch 可以中断（AbortController），XHR 靠 xhr.abort()。fetch 支持 ReadableStream 流式读取，XHR 可以监听 progress 事件——下载进度条场景 XHR 反而更方便。

另外 fetch 不支持超时设置（要配合 AbortController 模拟），也没有原生的上传进度回调。Service Worker 里只能用 fetch，XHR 不可用。

追问

什么场景下 XHR 比 fetch 更好？

需要上传/下载进度条时，XHR 有 progress 事件，fetch 没有原生的。需要超时控制时 XHR 有 timeout 属性。老浏览器兼容也选 XHR。

fetch 怎么取消请求？

AbortController：controller.abort() 发出取消信号，fetch 收到后抛出 AbortError。注意这只是前端取消，服务端可能还在处理。

fetch 怎么带 cookie？

fetch(url, { credentials: 'include' })。跨域时服务端还要设 Access-Control-Allow-Credentials: true 且 origin 不能用 *。