Fetch API发送请求与错误处理详解

本文深入剖析了 Fetch API 在实际开发中极易被忽视的关键陷阱与最佳实践：它明确指出 fetch 不会自动拒绝 404/500 等 HTTP 错误，必须手动检查 `response.ok` 并主动抛错，否则错误响应会被误当成功处理，引发后续解析崩溃；同时详解了 POST 提交 JSON 时 `body` 与 `headers` 的严格配对要求、跨域携带 Cookie 所需前后端协同配置的 CORS 头细节、原生不支持超时下如何用 `AbortController` 或 `AbortSignal.timeout()` 可靠实现超时控制，并强调 `response.json()` 自身也可能失败，需单独捕获——这些看似细微却高频踩坑的要点，正是写出健壮、可维护前端网络请求代码的核心所在。

fetch() 不会自动拒绝 404/500，必须手动检查 response.ok

浏览器把 HTTP 错误响应（如 404、500）当成“网络成功”，fetch() 依然 resolve，只是 response.ok === false。不检查它，后续直接调用 response.json() 就可能拿错状态当正常数据用，甚至因空响应或非法 JSON 崩掉脚本。

正确做法是在第一个 .then() 里立刻判断：

• 用 if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`) 主动抛错
• response.status 和 response.statusText 可用于构造具体错误提示
• 别只依赖 .catch()——它捕不到 4xx/5xx，只捕 DNS 失败、连接中断、CORS 拦截这类网络层异常

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/form-data 头
• 忘记 JSON.stringify() → 后端收到 [object Object]

跨域请求带 Cookie，单靠 credentials: 'include' 不够

前端加了 credentials: 'include' 却拿不到 cookie？服务端大概率没回 Access-Control-Allow-Credentials: true。

• Access-Control-Allow-Origin 不能为 *，必须写具体域名（如 https://myapp.com）
• 预检请求（OPTIONS）也得返回这两个头，否则浏览器直接拦截
• GET 请求默认不发 cookie，跨域时尤其要注意

超时需手动实现，fetch() 原生不支持 timeout 选项

移动端弱网下，fetch() 可能卡住不 reject，等服务器响应，自己不会超时。

• 推荐用 AbortController： const controller = new AbortController(); fetch(url, { signal: controller.signal }); setTimeout(() => controller.abort(), 8000);
• 现代浏览器可直接用 AbortSignal.timeout(8000)（更简洁）
• response.json() 本身也可能 reject（比如空响应、非 JSON 内容），要单独捕获，不能只靠外层 .catch()

最常被忽略的是：HTTP 错误和网络错误在 fetch 中是两类独立问题，处理逻辑必须分开；而 response.json() 的潜在失败，往往比请求本身更容易导致静默崩溃。

到这里，我们也就讲完了《Fetch API发送请求与错误处理详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！