js(包括vue)如何检测网络状况如离线......_js 检测是否离线的包-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_38291260/article/details/89226854

本文介绍如何使用HTML5的navigator.onLine属性及'online'/'offline'事件在Vue中监测网络状态变化，同时提供了一个利用H5 API plusready进行更详细网络类型检测的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通用方法，Html5在window.navigator对象上添加了一个属性onLine 返回布尔值 true表示在线.同时新增了两个事件：

    window.addEventListener('online',  function(){
     // 网络由异常到正常时触发
    });
    window.addEventListener('offline', function(){
     // 网络由正常常到异常时触发
    });
复制代码

在vue中实现思路如下：

data中初始化在线状态。

data(){
    return{
        onLine: navigator.onLine,
    }
}
复制代码

mounted中监听事件

mounted(){
    window.addEventListener('online',  this.updateOnlineStatus);
    window.addEventListener('offline', this.updateOnlineStatus);
}
复制代码

方法中改变onLine值

methods:{
    updateOnlineStatus(e) {
    	const { type } = e;
        this.onLine = type === 'online';
      },
}
复制代码

4.最后最好在销毁时解除事件监听

beforeDestroy(){
 window.removeEventListener('online',  this.updateOnlineStatus);
 window.removeEventListener('offline', this.updateOnlineStatus);
},

作者：黎明破晓的街道
链接：https://juejin.im/post/5bfccaa5e51d452c6061f599

另外也可以采用H5的API拓展plusready来实现

http://www.html5plus.org/doc/zh_cn/events.html

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>Events Example</title>
	<script type="text/javascript" >
// 扩展API加载完毕后调用onPlusReady回调函数 
document.addEventListener("plusready", onPlusReady, false);
function onPlusReady(){
	document.addEventListener("netchange", onNetChange, false);  
}
function onNetChange(){
	var nt = plus.networkinfo.getCurrentType();
	switch (nt){
		case plus.networkinfo.CONNECTION_ETHERNET:
		case plus.networkinfo.CONNECTION_WIFI:
		alert("Switch to Wifi networks!"); 
		break; 
		case plus.networkinfo.CONNECTION_CELL2G:
		case plus.networkinfo.CONNECTION_CELL3G:
		case plus.networkinfo.CONNECTION_CELL4G:
		alert("Switch to Cellular networks!");  
		break; 
		default:
		alert("Not networks!"); 
		break;
	}
}
	</script>
	</head>
	<body >
	</body>
</html>