js如何检测网络连接状态 判断网络质量的4种检测方法！

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('网络已断开');
  }
});

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('网络已断开');
  }
});

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('网络质量：差');
  }
});

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

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