JavaScript检测网络状态的方法有哪些？

JavaScript检测网络状态看似简单，实则暗藏陷阱：仅靠`navigator.onLine`属性和`online/offline`事件只能反映浏览器对网络连接的“主观认知”，无法判断真实网络可达性——比如Wi-Fi已连但路由器断网时仍会误报在线；真正可靠的方案需结合轻量级`fetch`探测（如HEAD请求/favicon.ico）进行二次验证，并辅以事件监听、错误捕获与用户友好的离线处理机制，才能在复杂网络环境中实现精准、健壮的状态感知。

JavaScript 主要通过 navigator.onLine 属性和监听 online / offline 事件来检测网络状态，但它有局限性——只反映浏览器是否“认为”已连接到网络，不保证能访问服务器或互联网。

使用 navigator.onLine 判断当前状态

navigator.onLine 是一个只读布尔值，返回 true 表示浏览器认为在线（比如网线插着、Wi-Fi 已连），false 表示明确离线（如飞行模式开启、禁用所有网络适配器）。

注意：它不会发起真实请求验证网络可达性。例如，路由器断网但电脑仍连着 Wi-Fi，navigator.onLine 仍可能返回 true。

• 直接读取：if (navigator.onLine) { /* 在线逻辑 */ }
• 页面加载后立即检查：console.log('初始状态：', navigator.onLine);

监听 online 和 offline 事件

浏览器会在网络连接状态变化时触发全局事件，适合做实时响应：

• window.addEventListener('online', () => console.log('已联网'));
• window.addEventListener('offline', () => console.log('已断网'));

这些事件在 Chrome、Firefox、Safari 和 Edge 中均支持，但触发时机略有差异（比如 Chrome 在系统级网络切换时才发，不是每次 DNS 失败都触发）。

增强判断：用 fetch 尝试真实请求验证

为弥补 navigator.onLine 的不足，可配合轻量 HTTP 请求（如 GET 自己的健康检查接口或 /favicon.ico）确认服务可达性：

• 封装一个简单探测函数：
  async function isActuallyOnline() {
  try {
    await fetch('/favicon.ico', { method: 'HEAD', cache: 'no-cache' });
    return true;
  } catch {
    return false;
  }
}
• 建议只在网络状态变为 true 后触发探测，避免频繁请求；失败时可重试 1–2 次再判定为不可用。

注意事项与最佳实践

不要仅依赖 navigator.onLine 做关键业务判断（如提交表单前校验）。真实场景中应结合：

• 事件监听 + 状态缓存（避免重复判断）
• 关键 API 调用时捕获 NetworkError 或 TypeError（fetch 报错常见于断网）
• 对用户友好提示，比如离线时显示「暂无网络，请稍后重试」并自动重试队列中的请求

基本上就这些。不复杂但容易忽略细节，尤其是假阳性（onLine=true但实际不通）问题。

今天关于《JavaScript检测网络状态的方法有哪些？》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！