fetch api 是现代替代 xmlhttprequest 的标准化方案，需手动检查 response.ok 处理 http 错误、显式设置 credentials 传递 cookie、用 abortcontroller 取消请求，所有行为均显式化。
Fetch API 是浏览器原生提供的、基于 Promise 的网络请求接口，它不是“比 AJAX 好”，而是现代替代 XMLHttpRequest（即传统 AJAX）的标准化方案；它更简洁、更符合当前 JS 生态，但默认行为和错误处理逻辑与你习惯的 jQuery.ajax 或封装过的 AJAX 工具不同——这点最容易踩坑。
Fetch 不会自动 reject 网络错误以外的 HTTP 状态码
这是最常被忽略的区别。用 fetch() 请求一个 404 或 500 接口时，then() 仍会执行，因为只要网络通、响应头收到，Promise 就算“成功”。而老式 XMLHttpRequest 或 jQuery.ajax 默认把 4xx/5xx 当作 error 触发失败回调。
实操建议：
- 必须手动检查
response.ok（等价于response.status >= 200 && response.status ） - 不要只依赖
catch()捕获 HTTP 错误 - 如果需要类 jQuery 行为，得自己封装一层
fetch('/api/user')
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error: ${response.status}`);
}
return response.json();
})
.then(data => console.log(data))
.catch(err => console.error('请求失败：', err));
Fetch 默认不带 Cookie，AJAX（XMLHttpRequest）默认带
在跨域或同域请求中，fetch() 默认不会发送 Cookie 和认证头，而 XMLHttpRequest 在同域下默认携带 Cookie，这也是登录态突然失效的常见原因。
立即学习“Java免费学习笔记（深入）”；
实操建议：
- 需要传 Cookie 时，显式设置
credentials: 'include' - 若只在同域用，可设为
'same-origin'（更安全） - 设为
'omit'则完全不带（默认值） - 注意：服务端需配合设置
Access-Control-Allow-Credentials: true，且不能用Access-Control-Allow-Origin: *
fetch('/api/profile', {
credentials: 'include'
});
Fetch 没有 progress 事件和 abort 旧语法，但支持 AbortController
传统 XMLHttpRequest 支持 upload.onprogress、download.onprogress，也支持直接调用 xhr.abort()。Fetch 没有内置 progress 回调，且取消请求必须用 AbortController —— 这是现代标准，但写法稍多一步。
实操建议：
- 上传进度需靠
ReadableStream+tee()手动读取（较复杂，一般用第三方库如axios或自定义流处理） - 取消请求务必创建
AbortController实例，并传入signal选项 - 调用
controller.abort()后，fetch Promise 会以AbortError被 reject
const controller = new AbortController();
fetch('/api/upload', {
method: 'POST',
signal: controller.signal,
body: formData
}).catch(err => {
if (err.name === 'AbortError') {
console.log('请求已被取消');
}
});
// 取消（例如用户点了“停止”按钮）
controller.abort();
真正要注意的不是“Fetch 多好”，而是它把隐式行为全显式化了：是否带 Cookie、是否判定 HTTP 错误、如何中断、如何处理重定向——这些都得你明确决定。封装得当，它比老 AJAX 更可靠；照搬 jQuery 思维直接用，反而容易漏掉关键分支。
