js检查网络连接

在JavaScript中检查网络连接通常涉及到监听浏览器的网络状态变化以及通过尝试进行网络请求来判断当前的网络状况。

基础概念：

• navigator.onLine：这是一个属性，返回一个布尔值，表示浏览器是否在线。当浏览器从最后一个已知的网络断开时，它会被设置为false，当重新连接时，会被设置为true。
• online 和 offline 事件：当网络状态发生变化时，浏览器会触发这两个事件。

优势：

• 实时性：可以实时监测网络状态的变化。
• 简单性：使用navigator.onLine属性和事件监听相对简单。

应用场景：

• 在线/离线模式切换：例如，在线时显示实时数据，离线时显示缓存数据。
• 网络请求前的检查：在进行重要的网络请求前，先检查网络连接状态。

示例代码：

1. 使用navigator.onLine属性：

if (navigator.onLine) {
    console.log('网络连接正常');
} else {
    console.log('网络连接已断开');
}

1. 监听网络状态变化：

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

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

1. 通过尝试网络请求检查（更准确）： 有时navigator.onLine可能不够准确，这时可以通过尝试发送一个小的网络请求来检查。

function checkNetwork() {
    return fetch('https://www.google.com', { mode: 'no-cors' })
        .then(() => true)
        .catch(() => false);
}

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

注意：在使用fetch进行网络检查时，使用了{ mode: 'no-cors' }选项，这是因为我们只是想检查网络连接，而不关心响应内容。

常见问题及解决方法：

• navigator.onLine不准确：有时浏览器可能无法准确判断网络状态。这时，可以结合网络请求来检查。
• 跨域问题：在使用fetch进行网络检查时，可能会遇到跨域问题。使用{ mode: 'no-cors' }可以避免这个问题，但只能检查是否能够建立连接，不能获取响应内容。
• 网络状态变化延迟：有时网络状态的变化可能会有延迟，这时可以通过定时器定期检查网络状态。

总之，通过结合navigator.onLine属性、事件监听以及网络请求，可以相对准确地判断浏览器的网络连接状态。