Fetch API 默认不带 cookie、不自动处理 4xx/5xx 状态码、不支持超时控制；需手动检查 response.ok、设置 credentials、JSON.stringify() body、用 AbortController 实现超时等。
Fetch API 是浏览器原生提供的异步网络请求接口，比传统 XMLHttpRequest 更简洁、更符合现代 Promise 风格；但它**默认不带 cookie、不自动处理 4xx/5xx 状态码、不支持超时控制**——这些恰恰是很多人踩坑的起点。
fetch() 基本用法与常见错误
最简调用：fetch(url) 返回 Promise，但只在网络失败（如断网、DNS 错误）时 reject，404 或 500 仍会 resolve。必须手动检查 response.ok 或 response.status。
fetch('/api/user')
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error: ${response.status}`);
}
return response.json();
})
.catch(err => console.error('请求失败:', err));
-
fetch()默认不发送 Cookie，需显式加credentials: 'include' - POST 请求必须手动设置
Content-Type头，否则后端可能收不到body - JSON 数据要先
JSON.stringify()，再传给body，不能直接传对象
fetch 与 XMLHttpRequest 的关键差异
不是“谁更好”，而是“行为不同”。比如：
-
XMLHttpRequest支持abort()和timeout属性；fetch()需靠AbortController实现中断，且原生无超时机制 -
XMLHttpRequest可监听上传进度（upload.onprogress）；fetch()不提供上传进度 API（需流式读取body并自行计算） -
fetch()的redirect默认为'follow'，而XMLHttpRequest会自动跟随但不暴露重定向响应
如何安全地添加 token 和 cookie
两者不能混用：若后端要求鉴权头（如 Authorization），就别设 credentials: 'include'，除非明确需要同时发 cookie 和 token（极少见）。
立即学习“Java免费学习笔记（深入）”；
- 只用 Bearer Token：
fetch('/api/data', { headers: { 'Authorization': 'Bearer <code>your-token-here</code>' } }); - 只用 Cookie：
fetch('/api/data', { credentials: 'include' }); - 两者都用（需后端配合 CORS）：
fetch('/api/data', { credentials: 'include', headers: { 'Authorization': 'Bearer <code>your-token-here</code>' } });
fetch 没有超时？自己加个保险
这是最常被忽略的点——fetch() 本身不支持 timeout 参数，网络卡住时 Promise 会一直挂起。
- 用
AbortController+setTimeout模拟超时：const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), 8000); fetch('/api/long-task', { signal: controller.signal }) .then(r => r.json()) .catch(err => { if (err.name === 'AbortError') { console.error('请求超时'); } }) .finally(() => clearTimeout(timeoutId)); - 注意：
AbortController在 Safari 15.4+ 才完全稳定，旧版需降级方案
真正难的不是写 fetch，而是记住它不会帮你做任何“合理假设”：不带 cookie、不判状态码、不设超时、不自动序列化 body——所有这些都得你一条条补上。
