JS如何检测网络状态？手把手教你四种判断网络质量的小技巧

还在为JS如何检测网络连接状态发愁？本文为你揭秘四种实用方法，助你轻松判断网络质量！别再傻傻依赖`navigator.onLine`，它可能并不准确。本文将深入讲解如何通过请求小图片或API接口，利用`fetch API`发起请求并判断响应状态，以及通过测量响应时间评估网络质量。掌握这些技巧，即使在复杂的网络环境下，也能更可靠地检测网络状态，提升用户体验。同时，我们也提醒你，网络检测并非万能，服务器负载、DNS解析等因素都可能影响结果，建议多次测量取平均值，以提高判断的准确性。

JS检测网络连接状态和质量的核心方法包括：1.使用navigator.onLine判断是否在线，但其准确性有限；2.通过请求小图片或API接口判断网络是否连通；3.使用fetch API发起请求并判断响应状态；4.通过测量响应时间评估网络质量。具体而言，navigator.onLine仅能作为辅助手段，实际更推荐通过Image对象或fetch API发起网络请求，若请求成功则说明网络连通，否则可能断开；同时，可记录请求开始和结束时间计算响应时间，从而评估网络质量，响应时间越短质量越高；此外，虽然浏览器提供了online和offline事件用于监听网络变化，但其依赖的navigator.onLine并不可靠，因此建议结合定期执行checkNetworkStatus函数提高准确性；需要注意的是，这些方法均受服务器负载、DNS解析等因素影响，建议多次测量取平均值以提升判断可靠性。

JS检测网络连接状态，简单来说就是看看用户是不是在线，以及网络质量如何。但别指望它能像专业测速工具那样精准，毕竟浏览器能提供的API有限。

直接上解决方案：

navigator.onLine 可以告诉你当前浏览器是否认为自己在线。但这玩意儿不太靠谱，有时候即使断网了，它也可能返回true。所以，别太依赖它。

判断网络质量的4种检测方法！

如何更可靠地检测网络状态？

navigator.onLine 只能作为辅助判断，更靠谱的方法是发起一个网络请求，比如请求一个小的图片或者API接口。如果请求成功，说明网络是通的；如果请求失败，那大概率就是断网了。

function checkNetworkStatus() {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = 'https://www.example.com/pixel.png?t=' + new Date().getTime(); // 添加时间戳防止缓存
    img.onload = () => resolve(true);
    img.onerror = () => resolve(false);
  });
}

checkNetworkStatus().then(isOnline => {
  if (isOnline) {
    console.log('网络已连接');
  } else {
    console.log('网络已断开');
  }
});

这种方法虽然比 navigator.onLine 靠谱，但也有局限性。比如，如果你的网站被防火墙屏蔽了，或者DNS解析有问题，这个方法也会认为网络是断开的。

除了图片，还能用什么来检测网络？

除了图片，还可以使用 fetch API 请求一个小的JSON文件。fetch API 提供了更丰富的配置选项，可以设置超时时间、请求头等等。

function checkNetworkStatus() {
  return fetch('https://www.example.com/api/ping', {
    mode: 'no-cors', // 避免跨域问题
    cache: 'no-cache' // 避免缓存
  })
  .then(response => response.ok)
  .catch(() => false);
}

checkNetworkStatus().then(isOnline => {
  if (isOnline) {
    console.log('网络已连接');
  } else {
    console.log('网络已断开');
  }
});

mode: 'no-cors' 可以避免跨域问题，cache: 'no-cache' 可以避免缓存。response.ok 可以判断请求是否成功。

如何判断网络质量？

判断网络质量是个更复杂的问题。简单来说，可以通过测量请求的响应时间来判断。响应时间越短，网络质量越好；响应时间越长，网络质量越差。

function checkNetworkQuality() {
  const startTime = new Date().getTime();
  return fetch('https://www.example.com/api/ping', {
    mode: 'no-cors',
    cache: 'no-cache'
  })
  .then(response => {
    const endTime = new Date().getTime();
    const responseTime = endTime - startTime;
    console.log('响应时间：', responseTime, 'ms');
    return responseTime;
  })
  .catch(() => {
    console.log('网络请求失败');
    return Infinity; // 返回一个很大的值，表示网络质量很差
  });
}

checkNetworkQuality().then(responseTime => {
  if (responseTime < 200) {
    console.log('网络质量：非常好');
  } else if (responseTime < 500) {
    console.log('网络质量：良好');
  } else if (responseTime < 1000) {
    console.log('网络质量：一般');
  } else {
    console.log('网络质量：差');
  }
});

需要注意的是，响应时间受到很多因素的影响，比如服务器的负载、网络的拥塞程度等等。所以，仅仅通过响应时间来判断网络质量是不够准确的。可以多次测量响应时间，取平均值，这样可以得到更可靠的结果。

如何监听网络状态的变化？

浏览器提供了 online 和 offline 事件，可以监听网络状态的变化。

window.addEventListener('online', () => {
  console.log('网络已连接');
});

window.addEventListener('offline', () => {
  console.log('网络已断开');
});

但是，正如前面提到的，navigator.onLine 并不靠谱，所以 online 和 offline 事件也可能不准确。更可靠的方法是使用前面提到的 checkNetworkStatus 函数定期检测网络状态。

总而言之，JS检测网络状态和质量并没有完美的解决方案。需要根据实际情况选择合适的方法，并结合多种方法来提高准确性。

今天关于《JS如何检测网络状态？手把手教你四种判断网络质量的小技巧》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于网络连接状态,响应时间,navigator.onLine,fetchAPI,JS网络检测的内容请关注golang学习网公众号！