fetch() 是现代标准但需手动补全 Cookie、错误处理和超时；常见无响应因忘 await/.then()，且 4xx/5xx 不 reject；需检查 res.ok、JSON.stringify、FormData 用法、GET 无 body、credentials 控制跨域 Cookie、AbortController 实现超时与取消。
JavaScript 发送网络请求，fetch() 是现代标准方案，但默认不带 Cookie、不自动处理 4xx/5xx 状态、不支持超时——这些不是“bug”，而是设计选择，得手动补全。
为什么 fetch() 调用后页面没反应？
常见原因是忘记 await 或漏掉 .then()，且 fetch() 只在**网络失败**（如断网、DNS 错误）时 reject，HTTP 状态码 404、500 仍算 fulfilled。
- 检查是否写了
await fetch(...)或fetch(...).then(res => {...}) - 手动判断
res.ok（即res.status >= 200 && res.status ） - 别直接
console.log(fetch(...))，那只是打印一个Promise对象
fetch() 怎么发 POST 并传 JSON？
必须显式设置 Content-Type 请求头，且 body 需是字符串（不能直接传对象）。
fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ username: 'admin', password: '123' })
})
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
});
-
JSON.stringify()不可省略，否则后端收不到合法 JSON - 若后端用
form-data，改用FormData实例作body，此时不要设Content-Type（浏览器会自动生成带 boundary 的 header） - GET 请求不能有
body，参数只能拼在 URL 后
如何让 fetch() 带 Cookie 或支持跨域认证？
默认情况下，fetch() 跨域请求不发 Cookie，也不暴露响应头（如 Set-Cookie），需靠 credentials 选项控制。
立即学习“Java免费学习笔记（深入）”；
- 同域请求：无需额外配置，Cookie 自动携带
- 跨域请求要发 Cookie：加
credentials: 'include'，且后端必须返回Access-Control-Allow-Credentials: true - 注意：
credentials: 'include'时，Access-Control-Allow-Origin不能为*，必须指定具体域名
怎么给 fetch() 加超时或取消请求？
fetch() 本身不支持超时，也无原生取消机制，得靠 AbortController + timeout 模拟。
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);
fetch('/api/data', {
signal: controller.signal
})
.finally(() => clearTimeout(timeoutId));
-
controller.abort()会触发fetch()Promise reject，错误类型是DOMException，name === 'AbortError' - 多个并发请求共用一个
AbortController可一键取消全部 - 超时时间不能靠
setTimeout精确控制（网络阻塞时可能延迟），仅作粗略防护
真正难的不是调通一次请求，而是统一处理错误路径、鉴权刷新、缓存策略和 loading 状态——fetch() 只是基础工具，封装层才决定项目里请求代码是否可维护。
