Fetch 是 XMLHttpRequest 的现代化封装，本质仍属 AJAX；区别在于 Fetch 基于 Promise、默认不带 cookie、HTTP 错误不 reject、无原生上传进度监听，而 XHR 支持事件回调、凭证自动携带、上传进度及同步请求（已废弃）。
Fetch API 是浏览器原生的异步网络请求接口，不是“替代 AJAX 的新方案”，而是 XMLHttpRequest（XHR）的现代化封装——它本身仍是 AJAX 的一种实现。
Fetch 和 XMLHttpRequest 本质区别在哪
Fetch 不是黑盒魔法，它用 Promise 封装了底层网络逻辑，而 XHR 是基于事件回调的老式 API。关键差异不在功能，而在控制粒度和错误处理行为：
-
fetch()默认不带 cookie，需显式传{ credentials: 'include' }才能发带凭证的请求 -
fetch()只有网络失败（如断网、DNS 失败）才 reject，HTTP 状态码 404/500 仍 resolve，必须手动检查response.ok或response.status - XHR 能监听上传进度（
upload.onprogress），Fetch 目前无法原生监听上传进度（需靠ReadableStream+TransformStream拆包模拟，复杂且兼容性差） - Fetch 不支持同步请求（
async: false在 XHR 中已废弃，Fetch 根本不提供）
怎么写一个健壮的 fetch 请求（含错误处理）
直接调用 fetch() 很容易漏掉 HTTP 错误分支，下面是最小可用模板：
function apiGet(url) {
return fetch(url, {
method: 'GET',
headers: { 'Content-Type': 'application/json' },
credentials: 'include'
})
.then(response => {
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
return response.json();
})
.catch(err => {
// 网络异常 or JSON 解析失败 or 上面 throw 的 HTTP 错误
console.error('Request failed:', err);
throw err;
});
}
// 使用
apiGet('/api/user')
.then(data => console.log(data))
.catch(err => alert('加载失败，请重试'));
注意：response.json() 本身也会 reject（比如返回非 JSON 内容），所以不能只依赖 response.ok 就认为数据一定可用。
立即学习“Java免费学习笔记（深入）”；
什么时候不该用 Fetch，还得回头用 XHR
不是所有场景都适合一刀切换 Fetch：
- 需要上传大文件并显示进度条 → 用
XMLHttpRequest.upload.onprogress，Fetch 没原生支持 - 要中止请求（abort）但目标浏览器不支持
AbortController（IE 完全不支持，iOS Safari xhr.abort() 兼容性更好 - 需精细控制请求头（如设置
Connection: keep-alive或自定义Host）→ Fetch 会过滤部分危险 header，XHR 更开放（但也更易被滥用） - 旧项目维护，已有大量 XHR 封装（如 jQuery.ajax）且无重构计划 → 强行替换收益低，风险高
真正容易被忽略的点：Fetch 的 redirect 默认策略是 'follow'，但某些鉴权流程依赖 302 不跳转来读取 Location header，这时得设 redirect: 'manual' 并自己处理响应；这个开关藏得深，出问题时很难联想到。
