JavaScript Ajax错误捕获需分三类处理:网络不可达、请求超时、服务端非成功状态码;用XMLHttpRequest可设timeout和onerror区分超时与中断,fetch则需AbortController配合catch AbortError;封装层应统一分层归因并返回结构化错误对象。

JavaScript 中 Ajax 请求超时与异常中断的错误捕获,不能只靠一个 try...catch 或单个回调解决。核心在于区分三类问题:网络不可达、请求超时、服务端返回非成功状态码,并为每类配置对应的捕获入口和响应策略。
用原生 XMLHttpRequest 显式控制超时与网络中断
XMLHttpRequest 提供了直接可用的事件钩子,适合精细控制:
-
设置超时时间:通过
xhr.timeout = 3000指定毫秒数,超时后触发ontimeout回调,此时status为 0,statusText为空字符串 -
捕获网络中断:断网、DNS 失败、CORS 预检拒绝等会触发
onerror,注意它不包含具体错误信息,仅表示“连接失败” -
区分超时与中断:在
onerror中检查xhr.readyState === 0且xhr.status === 0,可辅助判断是否为网络层彻底失败;而ontimeout是明确的计时器超限
用 fetch + AbortController 实现可取消的超时控制
fetch 本身不支持 timeout 参数,必须借助 AbortController 主动中止:
- 创建控制器:
const controller = new AbortController() - 启动定时器:
setTimeout(() => controller.abort(), 5000) - 发起请求时传入 signal:
fetch('/api/data', { signal: controller.signal }) - 捕获中止错误:
.catch(err => { if (err.name === 'AbortError') { /* 超时或手动取消 */ } })
这种方式比 xhr 更现代,且能统一处理“用户主动取消”和“自动超时”,但需注意:AbortError 不会触发 unhandledrejection,需在每个 fetch 调用处显式 catch。
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记(深入)”;
统一封装请求函数,把状态码和网络异常分层归因
真正健壮的错误处理,是在请求封装层完成分类,而不是依赖全局监听:
- 对 fetch 响应先检查
!response.ok,把 4xx/5xx 归为“业务响应失败”,抛出自定义错误如new HttpError(response.status, response.statusText) - 对
response.json()等解析操作加try/catch,把SyntaxError转为“数据格式异常” - 将网络异常(TypeError: Failed to fetch)、AbortError、以及未捕获的 Promise 拒绝,统一标记为“连接问题”,触发重试或离线提示
- 避免在业务代码里重复写
if (status === 'timeout'),而是让封装函数返回结构化错误对象,含type: 'timeout' | 'network' | 'http' | 'parse'
jQuery 用户可利用 $.ajaxSetup 全局接管
如果项目仍使用 jQuery,$.ajaxSetup 是最简方式实现统一错误响应:
- 设置
timeout: 5000后,超时会进入error回调,且status === 'timeout' -
error回调的第三个参数errorThrown在超时或网络中断时通常为空字符串,需结合status判断类型 - 推荐在
complete回调中统一做 loading 状态清理,在error中按status分支处理:如'error'表示网络失败,'timeout'单独提示,'parsererror'提示数据异常

















