Fetch 发 GET 请求直接调用 fetch(URL)，返回 Promise，需手动处理 JSON 解析、错误状态和中止逻辑；与 XMLHttpRequest 相比，它基于 Promise、不自动带 Cookie、响应体为单次读取的 ReadableStream。
Fetch API 怎么发 GET 请求
直接调用 fetch()，传入 URL 字符串即可发起 GET 请求。它返回一个 Promise，需要链式调用 .then() 或用 await 处理响应。
- 默认只带基础请求头（如
Accept: */*），不自动携带 Cookie，需显式加credentials: 'include' - 响应体不会自动解析成 JSON，必须手动调用
response.json() - 网络错误（如断网、DNS 失败）会 reject；但 HTTP 错误状态码（如 404、500）仍算 resolve，需检查
response.ok或response.status
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.json();
})
.then(data => console.log(data))
.catch(err => console.error('请求失败:', err));
Fetch 和 XMLHttpRequest（Ajax）的核心区别
Fetch 是浏览器原生的现代替代方案，不是对 XMLHttpRequest 的封装，二者设计哲学不同。
-
XMLHttpRequest是事件驱动（onload、onerror）、可中断（abort()）、支持上传进度监听；fetch()基于 Promise，不可中断（除非用AbortController） -
XMLHttpRequest默认发送 Cookie（同源时），fetch()默认不发，必须设credentials: 'include' -
XMLHttpRequest能直接读取响应头和响应体原始内容；fetch()的Response对象是只读流，多次读取会报错（如先json()再text()就失败） - 上传文件时，
XMLHttpRequest可用FormData直接发；fetch()同样支持，但需注意Content-Type会被浏览器自动设置为带 boundary 的 multipart，不能手动覆盖
如何中止 Fetch 请求
Fetch 本身不支持中止，但可通过 AbortController 实现等效效果。这是最常被忽略的兼容性要点——IE 完全不支持 AbortController，旧项目需降级或 polyfill。
- 创建
AbortController实例，把它的signal传给fetch()的signal选项 - 调用
controller.abort()即可中止请求，此时fetch()的 Promise 会以AbortErrorreject - 注意：中止后不能再复用该
signal，每次请求都应新建AbortController
const controller = new AbortController();
fetch('/api/upload', {
method: 'POST',
body: formData,
signal: controller.signal
})
.catch(err => {
if (err.name === 'AbortError') {
console.log('请求已被取消');
}
});
// 例如 5 秒后取消
setTimeout(() => controller.abort(), 5000);
为什么 fetch 返回的 Response.body 是 ReadableStream
这是为了支持流式处理大响应体（如视频、日志流），避免一次性加载全部内容到内存。但这也意味着你不能反复读取它。
-
response.json()、response.text()、response.blob()都会消费流，调用一次后流就关闭了 - 若需多次使用响应数据，要么缓存解析结果（如
const data = await response.json()），要么克隆流：response.clone().json() - 服务端返回压缩内容（如 gzip）时，浏览器自动解压，
ReadableStream输出的是解压后的字节，无需手动处理
response.ok 就直接 .json()，或者在未 clone 的情况下重复读取响应体。这些错误在开发时不易暴露，上线后才突然报错。 
