JavaScript检测网络状态主要依靠navigator.onLine属性和online/offline事件，但该属性仅反映浏览器连接感知而非真实连通性；需结合轻量HTTP探测增强判断，并注意移动端兼容性与初始化不准等问题。
JavaScript 检测网络状态主要依靠 navigator.onLine 属性和 online/offline 事件，但要注意它只反映浏览器的“连接感知”，不是真实网络连通性（比如能连 WiFi 但无法访问服务器时仍可能返回 true）。
读取当前在线状态
使用 navigator.onLine 可立即获取浏览器认为的当前状态：
-
true表示浏览器认为设备已连接网络（如接入了 Wi-Fi、以太网或移动数据） -
false表示浏览器明确检测到离线（如飞行模式开启、网络适配器禁用）
注意：该属性不发起任何网络请求，也不验证是否能访问互联网或特定服务。
监听 online/offline 事件
在 window 上监听这两个事件，可响应网络状态变化：
立即学习“Java免费学习笔记（深入）”；
window.addEventListener('online', () => {
console.log('已上线');
// 可在此重试失败请求、同步缓存数据等
});
window.addEventListener('offline', () => {
console.log('已离线');
// 可提示用户、暂停轮询、启用离线 UI 等
});
事件触发时机取决于浏览器实现，通常在系统网络接口状态变化时触发（如断开 Wi-Fi、拔掉网线），但存在延迟或漏触发可能。
增强判断：发起轻量探测请求
为弥补 navigator.onLine 的局限性，可搭配一个快速 HTTP 请求（如对自身域名或可靠 CDN 的 /health 或空响应端点）：
- 建议用
fetch()配合短超时（如 2–3 秒）和no-cors安全限制允许的简单 GET - 若请求失败（网络错误、超时、非 2xx 响应），更可信地判定为“实际不可用”
- 避免高频探测，可结合事件触发后主动检查，或按需手动刷新状态
注意事项与常见误区
不要依赖 onLine 单独判断服务可用性 —— 它无法区分“有网但 DNS 失败”、“有网但防火墙拦截”、“有网但 API 服务宕机”等情况。
页面加载时 onLine 可能不准 —— 某些浏览器在页面初始化阶段尚未完成网络探测，首次读取可能为 false，建议稍作延迟再读或结合事件监听。
移动端行为差异较大 —— iOS Safari 对 offline 事件支持较弱，部分 Android 浏览器在网络切换瞬间可能不触发事件，需降级处理。
