JavaScript断网重连与离线提示的核心是智能判断网络状态、分类处理请求错误、可控重试（限次+退避+手动触发）及明确用户反馈，形成完整体验闭环。
JavaScript 实现接口调用中的断网重连与离线提示，核心在于监听网络状态、捕获请求失败、设计重试策略，并及时反馈用户。关键不是“一直重试”，而是“智能判断 + 可控重试 + 明确提示”。
监听网络状态，提前感知离线
使用 navigator.onLine 结合 online/offline 事件可快速响应网络切换：
-
navigator.onLine初始值反映页面加载时状态，但可能不准（如 WiFi 连接但无外网），需配合请求验证 - 监听事件仅能发现“从离线→在线”或“从在线→离线”，不能保证当前请求一定能通，适合做辅助提示
- 建议在页面加载后立即检查，并绑定全局事件：
function handleNetworkChange() {
if (!navigator.onLine) {
showOfflineTip('网络已断开，请检查连接');
}
}
window.addEventListener('offline', handleNetworkChange);
window.addEventListener('online', () => {
hideOfflineTip();
});
// 页面初始化时也检查一次
if (!navigator.onLine) handleNetworkChange();
请求失败时区分错误类型，避免盲目重试
fetch 或 axios 请求失败不等于“断网”，可能是超时、服务端 500、CORS、DNS 失败等。应分类处理：
-
明确的网络错误：fetch 抛出异常（如
TypeError: Failed to fetch）、axios 的error.code === 'ERR_NETWORK' - HTTP 状态码异常：如 0（常见于断网或跨域拦截）、408、502、503、504 等可重试状态码
- 业务错误（如 401、403）或客户端错误（400）一般不重试
示例（基于 fetch 封装）：
立即学习“Java免费学习笔记（深入）”；
async function safeFetch(url, options = {}) {
try {
const res = await fetch(url, {
...options,
signal: AbortSignal.timeout(8000) // 主动控制超时
});
if (res.status >= 500 || res.status === 0) {
throw new Error(`HTTP ${res.status}`);
}
return res;
} catch (err) {
if (err.name === 'AbortError' || /failed to fetch|network error/i.test(err.message)) {
throw new NetworkError('网络请求失败');
}
throw err;
}
}
实现可控重试机制，带退避与终止条件
重试不是无限循环，需限制次数、增加间隔、允许取消：
- 默认重试 2～3 次，首次延迟 1s，后续按指数退避（如 1s → 2s → 4s）
- 每次重试前检查
navigator.onLine，离线时不发起请求，只等待恢复 - 提供手动重试入口（如按钮），并支持用户主动取消重试队列
- 对非幂等请求（如 POST/PUT），重试前需确认是否安全（例如带唯一请求 ID 防重复提交）
简易重试封装示例：
async function retryFetch(url, options = {}, maxRetries = 2) {
let lastError;
for (let i = 0; i <= maxRetries; i++) {
try {
if (!navigator.onLine) {
await new Promise(r => setTimeout(r, Math.min(1000 * 2 ** i, 10000)));
continue;
}
return await safeFetch(url, options);
} catch (err) {
lastError = err;
if (i < maxRetries) {
await new Promise(r => setTimeout(r, 1000 * 2 ** i));
}
}
}
throw lastError;
}
统一离线提示与用户交互反馈
提示要清晰、可关闭、不干扰操作：
- 离线时显示顶部横幅或全局 toast，文字明确（如“暂无网络，正在重试…”），不要用“加载中”这种模糊表述
- 自动重试中显示进度（如“第 2 次重试（2/3）”），避免用户反复点击
- 重试失败后提供“重试”按钮，并记录失败原因（便于调试）
- 关键操作（如提交表单）离线时可缓存数据到 localStorage，待联网后自动同步（需注意冲突处理）
简单提示函数参考：
let offlineToast;
function showOfflineTip(msg) {
if (offlineToast) return;
offlineToast = document.createElement('div');
offlineToast.className = 'offline-tip';
offlineToast.innerHTML = `
<span>${msg}</span><button onclick="retryNow()">重试</button>
`;
document.body.appendChild(offlineToast);
}
function hideOfflineTip() {
if (offlineToast) {
offlineToast.remove();
offlineToast = null;
}
}
function retryNow() {
// 触发一次手动重试逻辑
hideOfflineTip();
}
不复杂但容易忽略的是：断网提示不是技术兜底，而是用户体验闭环。真正健壮的方案 = 网络监听 + 请求兜底 + 重试策略 + 明确反馈 + （可选）离线缓存。每一步都服务于“让用户知道发生了什么、系统在做什么、他能做什么”。
