fetch异常分网络层(typeerror,如断网、cors拦截)和http层(response.ok为false,如404、500);需分别用try/catch捕获网络错误和手动检查response.ok处理http错误。

Fetch 请求的异常分两类:网络层失败(如断网、DNS 解析失败、连接被拒绝)和 HTTP 层错误(如 404、500)。它们触发机制不同,必须用不同方式捕获。
捕获网络异常(断网、无响应等)
这类问题导致 fetch 返回的 Promise 直接 reject,错误类型是 TypeError,消息通常含 "Failed to fetch"、"NetworkError" 或 "AbortError"。它不会进入 .then(),也不会返回 Response 对象。
- 用
try/catch包裹await fetch(),再检查err instanceof TypeError - 结合正则判断错误消息关键词,提高兼容性(不同浏览器措辞略有差异)
- 不要依赖
response.status或response.ok——此时根本没有 response
捕获 HTTP 状态码异常(404、500、401 等)
服务器成功响应但状态码非 2xx 时,fetch 仍 resolve,并返回一个 Response 实例。此时 response.ok === false,response.status 是具体码值。
- 必须在拿到 response 后立即检查
!response.ok或response.status >= 400 - 推荐优先使用
response.ok,语义清晰且覆盖 200–299 范围 - 检查后手动
throw new Error(...),才能让后续catch或外层try/catch捕获
统一处理建议(推荐 async/await 写法)
把网络异常和 HTTP 异常放在同一个 try/catch 块中处理,逻辑更集中,也方便加日志、重试或 UI 提示。
- 先 await fetch,捕获 TypeError 类网络错误
- 再检查 response.ok,对失败状态抛出自定义错误
- 最后解析 JSON 或其他数据体,也要单独 try/catch 防止解析失败
- 可选:搭配 AbortController 设置超时或主动中断,增强可控性
注意 CORS 和跨域限制带来的特殊行为
当请求因 CORS 策略被浏览器拦截时,fetch 也会 reject 并抛出 TypeError(如 "No 'Access-Control-Allow-Origin' header"),它属于网络层异常范畴,可用同种方式捕获。但此时控制台通常有明确提示,且 response 对象不可读——所以无需尝试访问 response.status 或 response.headers。
大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!











