js判断网络状态

一般来说判断网络状态都是用的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这种同步判断也是一种弊端，但综合来说是不需要任何依赖，禁用原生功能就可以实现判断网络畅通与否的最佳方案了！！！！！

猜你喜欢