fetch需用.then()或await处理Promise；404/500不触发catch，须检查response.ok；GET中文URL要encodeURIComponent；POST需设headers和JSON.stringify(body)；取消请求用AbortController；IE不支持fetch，需polyfill或换axios。
fetch 基本用法：GET 请求怎么写才不报错
直接调用 fetch() 不会自动等待响应，它返回的是一个 Promise，必须用 .then() 或 await 处理；否则你会拿到一个 pending 状态的 Promise，控制台看不到数据，也容易误以为“没发出去”。
HTTP 状态码如 404、500 不会触发 catch，除非网络失败——这是最常踩的坑。
-
fetch()默认只拒绝网络错误（如 DNS 失败、断网），2xx 以外的状态码仍算“成功” - 必须手动检查
response.ok或response.status才能捕获业务错误 - GET 请求无需额外配置，但 URL 中中文或特殊字符要先用
encodeURIComponent()编码
const url = 'https://api.example.com/users?id=' + encodeURIComponent('张三');
fetch(url)
.then(response => {
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.json();
})
.then(data => console.log(data))
.catch(err => console.error('请求失败:', err));
POST 请求传 JSON 数据：headers 和 body 怎么配
发送 JSON 必须同时设置两个关键项：Content-Type: application/json 和把对象转成字符串。漏掉任一都会导致后端收不到数据或解析失败，常见错误是后端日志里看到空 body 或 400 Bad Request。
-
headers要显式传入对象，不能写在 URL 后面或用字符串拼接 -
body必须是字符串，JSON.stringify()不可省略 - 如果后端要求带 token，
Authorization也要放在headers里，不是 query 参数
fetch('https://api.example.com/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer abc123'
},
body: JSON.stringify({ username: 'admin', password: '123' })
})
.then(r => r.json())
.then(console.log);
如何取消 fetch 请求：AbortController 是唯一可靠方式
原生 fetch() 没有内置的 cancel() 方法，也不能像 XMLHttpRequest 那样调 .abort()。想中止进行中的请求，必须用 AbortController，否则用户切换页面或输入框快速连打时，旧请求还在后台跑，可能覆盖新结果或浪费资源。
- 每个请求需新建一个
AbortController实例，复用会导致意外中止其他请求 - 把
controller.signal传给fetch()的signal选项 - 调用
controller.abort()后，Promise 会以AbortError拒绝，需在catch中识别
const controller = new AbortController();
setTimeout(() => controller.abort(), 5000);
fetch('/data', { signal: controller.signal })
.then(r => r.json())
.catch(err => {
if (err.name === 'AbortError') {
console.log('请求已取消');
} else {
console.error(err);
}
});
兼容性与 polyfill：IE 完全不支持，别硬扛
fetch 在 IE 中完全不可用，哪怕加了 Promise polyfill 也没用。Safari 10.1+、Chrome 42+、Firefox 39+ 才原生支持。如果项目还需兼容 IE，不要尝试魔改 fetch，直接换方案更省事。
立即学习“Java免费学习笔记（深入）”；
- 用
axios或node-fetch（服务端）替代，它们内部自动处理兼容逻辑 - 若坚持用原生 API，必须引入
whatwg-fetchpolyfill，且要在所有业务代码前加载 - 注意
AbortController在 Safari 12.1 以下也不支持，polyfill 需额外引入abortcontroller-polyfill
复杂点在于：不同环境（浏览器 / Node / 测试框架）对 fetch 的实现细节有差异，比如重定向策略、cookie 默认行为、超时处理——这些没法靠一个 polyfill 统一补全。
