JavaScript 处理 Ajax 异常需分层捕获：fetch 用 try/catch 捕网络异常，then 中检查 response.ok 处理 4xx/5xx；XMLHttpRequest 需监听 onerror、ontimeout 和 onreadystatechange；应按错误类型差异化提示用户并增强健壮性。
JavaScript 中处理 Ajax 请求失败与网络异常，核心是区分错误类型、捕获时机和提供合理反馈。现代开发推荐优先使用 fetch（配合 try/catch 和显式状态检查），同时注意它不会因 HTTP 状态码（如 404、500）自动抛错——这点常被忽略。
fetch 的错误捕获要分两层
fetch 只在网络完全断开、DNS 失败、请求被中止等真正“网络异常”时才 reject；而 4xx/5xx 响应仍会进入 then，需手动判断 response.ok 或 response.status。
- 第一层：用
try/catch捕获网络异常（如离线、跨域拒绝、AbortError） - 第二层：在
then中检查!response.ok，再用response.json()解析错误体（如果后端返回了结构化错误信息） - 示例关键逻辑：不能只依赖 catch，否则 500 错误会悄无声息地进入业务成功分支
XMLHttpRequest 需监听多个错误事件
传统 XMLHttpRequest 更底层，错误处理更分散：
-
onerror：触发于网络层失败（如连接中断、CORS 被拒） -
ontimeout：需提前设置timeout属性，超时后触发 -
onreadystatechange中检查readyState === 4后，再判断status < 200 || status >= 300 - 注意：
onerror不会触发于 401、404 等 HTTP 错误，它们属于“成功响应”，只是状态码不正常
统一错误分类与用户提示策略
实际体验中，用户不需要知道是“网络超时”还是“服务器内部错误”，但前端应做差异化处理：
立即学习“Java免费学习笔记（深入）”；
- 网络不可达 / CORS / Abort：提示“网络连接异常，请检查网络或稍后重试”，可附“重试按钮”
- HTTP 400/401/403：对应表单校验失败、登录过期、权限不足，应跳转登录或引导修正输入
- HTTP 404/500/502/503：服务端问题，提示“服务暂时不可用”，避免暴露技术细节，可记录日志供排查
- 所有错误建议加唯一 request ID（由后端返回或前端生成），便于前后端联查
增强健壮性的实用技巧
真实场景下，仅捕获错误不够，还需主动防御：
- 为 fetch 添加超时控制：用
AbortController+setTimeout主动中止挂起请求 - 对非幂等请求（如 POST/PUT）避免重复提交：发送前禁用按钮，响应后恢复，或使用防抖 + 请求锁
- 离线优先场景：检测
navigator.onLine，提前拦截并缓存请求（需结合 IndexedDB 或 localStorage） - 错误上报：捕获后调用轻量日志接口（如
fetch('/log', { method: 'POST', body: JSON.stringify(errorInfo) })），不阻塞主流程
