一般来说判断网络状态都是用的h5提供的navigator去判断、项目一般这样去用
if(!navigator.onLine){
e.stopPropagation();
layer.msg('网络未连接,请检查重试',{time:3000,icon:5});
return;
}
还可以通过事件去判断网络何时断开何时连接,不过通过事件去判断向不好
window.addEventListener('online', function(){
console.log('网络连接恢复!');
})
window.addEventListener('offline', function(){
console.log('网络连接中断!');
})
//或者
window.ononline=function(){
console.log('网络连接恢复!');
}
window.onoffline=function(){
console.log('网络连接中断!');
}
然而navigator.onLine和online、offline事件却不是万能的,在pc端时只能判断无线和网线是否连接,而不能判断是否有网络、是否可以上网
当然也可以发起ajax请求,根据请求结果判断网络的通断
$.ajax({
url: 'https://sug.so.360.cn/suggest',
dataType:'jsonp',
success: function(result){
console.log('网络正常')
},
error: function(result){
console.log('网络异常')
}
});
当然这种也不是很完美,而且不是很实用,无法很好的区分是服务器出现故障还是用户的网络有问题。但是这确实最有效的方式
还可以往网页放一张图片,看一下是否请求到
<img id="img-test" style="display:none;" onerror="console.log('网络故障')"/>
<script>
function onLine(){
var imgPath = "https://www.baidu.com/img/bd_logo1.png";
var timeStamp = Date.parse(new Date());
$("#img-test").attr("src", imgPath + "?timestamp=" + timeStamp);
};
onLine()
</script>
综合来看,这是图片是否加载成功是最佳判断网络通断的方案,下面是我简单封装了一个判断网络通断的方法
function onLine(callback){
var img = new Image();
img.src = 'https://www.baidu.com/favicon.ico?_t=' + Date.now();
img.onload=function(){
if (callback) callback(true)
};
img.onerror=function(){
if (callback) callback(false)
};
}
onLine(function(flag){
if(flag){
console.log('网络畅通')
}else{
console.log('网络故障')
}
})
onLine函数判断是否正常,正常与否结果在回调函数返回,也可以改成promise形式,但是必须异步返回,不可以做成像navigator.onLine这种同步判断也是一种弊端,但综合来说是不需要任何依赖,禁用原生功能就可以实现判断网络畅通与否的最佳方案了!!!!!
改成promise函数:!!!!
function onLine(){//基于promise,可以用async和await
var img = new Image();
img.src = 'https://www.baidu.com/favicon.ico?_t=' + Date.now();
return new Promise((resolve,reject)=>{
img.onload=function(){
resolve(true)
};
img.onerror=function(){
resolve(false)
};
})
}
//在异步函数可以直接await
async judgeAthu(){
let net_state = await onLine()
net_state?(alert('网络畅通')&&(dosomething else)):alert('网络中断')
}