fetch不抛HTTP错误,必须手动检查response.ok并处理response.json()可能的reject;POST需配对JSON.stringify与Content-Type;跨域带cookie需前后端CORS头配合;超时需AbortController;空响应或非法JSON易致脚本崩溃。

直接用 fetch() 发起请求本身不会报错,但绝大多数失败都源于没检查 response.ok 或没处理 response.json() 的 reject,导致 404/500 被当成成功、空响应或非法 JSON 直接崩掉脚本。
fetch() 不抛 HTTP 错误,必须手动判断 response.ok
浏览器把 404、500 这类响应仍视为“网络成功”,fetch() 依然 resolve,只是 response.ok === false。不检查它,后续逻辑就会拿错误状态当正常数据用。
- 正确做法:在第一个
.then()里立刻判断if (!response.ok) throw new Error(...) - 别只依赖
catch()—— 它捕不到 4xx/5xx,只捕网络中断、DNS 失败这类底层异常 -
response.status和response.statusText可用于构造更具体的错误提示
POST 提交 JSON 时,body 和 headers 必须配对
后端收不到数据?八成是漏了 JSON.stringify() 或写错了 Content-Type。
-
body必须是字符串(JSON.stringify({}))、FormData、URLSearchParams或Blob,不能直接传对象 - 传 JSON 就必须加
headers: { 'Content-Type': 'application/json' } - 如果用了
FormData,别手动设Content-Type—— 浏览器会自动覆盖并填入带 boundary 的 multipart 头
跨域带 Cookie 需前后端配合,单靠 credentials: 'include' 不够
前端加了 credentials: 'include' 却拿不到 cookie?服务端大概率没回 Access-Control-Allow-Credentials: true。
立即学习“前端免费学习笔记(深入)”;
- 前端必须显式写
{ credentials: 'include' },默认不发 cookie - 服务端响应头必须同时包含:
Access-Control-Allow-Origin(不能为*,得写具体域名)和Access-Control-Allow-Credentials: true - 预检请求(OPTIONS)也得返回这两个头,否则浏览器直接拦截
超时和重定向要手动控制,fetch() 原生不支持 timeout
弱网下请求卡住不动?那是 fetch() 在等服务器响应,它自己不会超时。
- 用
AbortController实现超时:const controller = new AbortController(); setTimeout(() => controller.abort(), 8000); fetch(url, { signal: controller.signal }) - 现代浏览器可直接用
AbortSignal.timeout(8000)(更简洁) - 重定向默认自动跳转且不暴露中间响应;如需感知跳转,设
redirect: 'manual',再检查response.type === 'opaqueredirect'
最常被忽略的是:即使 response.ok === true,response.json() 也可能 reject —— 比如后端返回空体、HTML 错误页、或字段名拼错导致 JSON 格式非法。每次调用它,都该套一层 try/catch 或单独 .catch()。



















