js 怎样检测网络状态

false

window

// 初始化时检查一次 console.log('当前网络状态:', navigator.onLine ? '在线' : '离线');  // 监听网络上线事件 window.addEventListener('online', () => {   console.log('网络已连接！');   // 可以在这里执行一些网络恢复后的操作，比如重新同步数据、刷新UI   alert('网络已恢复，您的操作可以继续了。'); });  // 监听网络离线事件 window.addEventListener('offline', () => {   console.log('网络已断开！');   // 在这里可以提示用户网络异常，或者启用离线模式   alert('网络已断开，请检查您的网络连接。'); });  // 一个简单的函数封装，方便在应用中调用 function checkNetworkStatus() {   return navigator.onLine; }  // 示例：每隔一段时间检查 // setInterval(() => { //   console.log('定时检查:', checkNetworkStatus() ? '在线' : '离线'); // }, 5000);

fetch

no_content

async function isActuallyOnline() {   if (!navigator.onLine) {     // 如果navigator.onLine已经是false，那肯定离线了     return false;   }    try {     // 尝试请求一个不会被缓存的小文件或一个无内容的端点     // 注意：这里的URL需要是你确定能访问的、稳定的公共资源     const response = await fetch('https://www.google.com/favicon.ico?_t=' + Date.now(), {       method: 'HEAD', // 只请求头部，更快       cache: 'no-store', // 确保不走缓存       mode: 'no-cors' // 避免CORS问题，但这样就无法读取响应状态码                        // 如果需要状态码，则必须确保CORS策略允许     });     // 如果使用no-cors模式，response.ok总是true，response.status总是0     // 这种情况下，只要请求没有抛出错误，就认为网络是通的     return true;   } catch (error) {     console.warn('网络连通性检查失败:', error);     return false;   } }  // 结合事件监听使用 window.addEventListener('online', async () => {   console.log('网络似乎已连接，正在进行实际检查...');   if (await isActuallyOnline()) {     console.log('确认：已连接到互联网！');     // 执行互联网恢复后的操作   } else {     console.warn('警告：设备已连接网络，但无法访问互联网。');     // 提示用户网络受限   } });  window.addEventListener('offline', () => {   console.log('网络已断开，无需进行实际检查。'); });  // 首次加载时也检查一次 (async () => {   console.log('初始化检查：', await isActuallyOnline() ? '已连接互联网' : '未连接互联网'); })();

alert

// contexts/NetworkStatusContext.js import React, { createContext, useState, useEffect, useContext } from 'react';  const NetworkStatusContext = createContext();  export const NetworkStatusProvider = ({ children }) => {   const [isOnline, setIsOnline] = useState(navigator.onLine);   const [isActuallyOnline, setIsActuallyOnline] = useState(navigator.onLine); // 更准确的互联网连接状态    // 模拟一个实际的网络检查函数   const checkActualConnection = async () => {     if (!navigator.onLine) {       setIsActuallyOnline(false);       return;     }     try {       // 这里的URL替换为你的实际检查点       await fetch('https://www.google.com/favicon.ico?_t=' + Date.now(), { method: 'HEAD', cache: 'no-store', mode: 'no-cors' });       setIsActuallyOnline(true);     } catch (error) {       setIsActuallyOnline(false);     }   };    useEffect(() => {     const handleOnline = () => {       setIsOnline(true);       // 延迟检查，避免网络刚恢复但DNS还没解析好等情况       setTimeout(checkActualConnection, 1000);     };     const handleOffline = () => {       setIsOnline(false);       setIsActuallyOnline(false);     };      window.addEventListener('online', handleOnline);     window.addEventListener('offline', handleOffline);      // 首次加载时也进行实际检查     checkActualConnection();     const intervalId = setInterval(checkActualConnection, 30 * 1000); // 每30秒检查一次实际网络      return () => {       window.removeEventListener('online', handleOnline);       window.removeEventListener('offline', handleOffline);       clearInterval(intervalId);     };   }, []);    return (     <NetworkStatusContext.Provider value={{ isOnline, isActuallyOnline }}>       {children}     </NetworkStatusContext.Provider>   ); };  export const useNetworkStatus = () => useContext(NetworkStatusContext);  // 在组件中使用： // import { useNetworkStatus } from '../contexts/NetworkStatusContext'; // function MyComponent() { //   const { isOnline, isActuallyOnline } = useNetworkStatus(); //   return ( //     <div> //       <p>设备网络状态: {isOnline ? '在线' : '离线'}</p> //       <p>互联网连接状态: {isActuallyOnline ? '已连接' : '未连接'}</p> //       {!isActuallyOnline && <div style={{ color: 'red' }}>网络连接不稳定或已断开，部分功能可能受限。</div>} //     </div> //   ); // }