网络中断需多维度判断：结合 status=0、TypeError 错误信息、navigator.onLine 及超时机制，封装 safeFetch 统一处理，并配合 offline 事件提示与重试机制提升体验。
网络中断时，Ajax 请求会触发 error 回调或 Promise 的 catch，但仅靠状态码（如 0）无法 100% 确定是断网——也可能是跨域、DNS 失败或本地代理异常。关键在于结合状态码、响应体、超时机制和浏览器在线状态做综合判断。
识别真正的网络中断
XMLHttpRequest 和 fetch 都会在断网时返回 status = 0（XHR）或抛出 TypeError: Failed to fetch（fetch），但这不是绝对依据：
- XHR 中
status === 0 && statusText === ""是强信号，但需排除请求未发出（如被 CORS 阻止） - fetch 不会进入
then，直接进catch，但错误类型需过滤：只对TypeError且消息含"fetch"或"network"才视为断网 - 建议搭配
navigator.onLine判断：若为false，基本可确认断网；若为true但请求失败，可能是局域网通但外网不通
统一提示逻辑（推荐封装）
避免每个请求都写重复判断，封装一个带容错提示的请求函数：
function safeFetch(url, options = {}) {
const controller = new AbortController();
const timeout = options.timeout || 8000;
setTimeout(() => controller.abort(), timeout);
return fetch(url, {
...options,
signal: controller.signal
}).catch(err => {
if (err.name === 'AbortError') {
throw new Error('请求超时');
}
if (err instanceof TypeError && /network|fetch/i.test(err.message)) {
throw new Error('网络连接已中断，请检查网络后重试');
}
throw err;
});
}
// 使用示例
safeFetch('/api/data')
.then(res => res.json())
.catch(err => {
alert(err.message); // 或用 Toast 组件显示
});
增强用户体验的小技巧
单纯弹窗不友好，可叠加以下策略：
立即学习“Java免费学习笔记（深入）”；
- 自动监听
window.addEventListener('offline', ...)，提前在页面顶部显示“网络已断开”横幅 - 请求失败后，提供“重试”按钮，并默认使用上次参数重新发起请求
- 对非核心接口（如埋点、日志上报），失败时静默丢弃，不打扰用户
- 若检测到
navigator.onLine === false，禁用所有依赖网络的操作按钮并置灰
注意兼容性与边界情况
某些环境行为不一致，需特别处理：
- 移动端 WebView 中
navigator.onLine可能始终返回true，建议加 ping 心跳接口兜底（如请求一个轻量静态资源） - Chrome DevTools 模拟离线时，fetch 报错信息可能不含 “network”，需用
err.name === 'TypeError'主判断 - IE11 不支持
AbortController，需用 XHR +timeout属性替代
不复杂但容易忽略细节，核心是别只信 status=0，要多维度交叉验证，再给用户明确、可操作的反馈。
