js监听网络状态实现断网重连后自动刷新页面

简介：js监听网络状态，网络重连时自动刷新页面请求

今天在逛某App的时候，由于宿舍网络信号不好突然断网，但是过了一会儿后重新连上网络了。我并没有刷新或者重新进入页面，App就自动重新连接网络请求数据了。我猜测App应该是做了网络监听的功能，网络连接成功后重新请求服务器获取数据。

那么js有没有相关办法监听网络状态呢？如果js可以监听到，如果断后重新连接到网络后自动重新获取数据或者是刷新当前页面，以提升用户体验。

注意：所有监听方法在pc端可能会不起作用，但是在手机端没有影响

1. js监听网络状态

js的 navigator.onLine 会返回当前网络状态，我们可以使用来判断，网络未连接时提示用户当前网络不可用如下所示：

window.addEventListener('load',function(){
    if(!navigator.onLine){
        console.log('提示用户，网络异常')
    }
})

如果加载后网络发现变化，上面的代码就不理想了。

我们可以监听 offline 和 online 这两个事件，在监听中提示用户网络状态或者做一些自动重载的逻辑代码：

window.addEventListener('offline',function(e){
    console.log('监听网络关闭：',e);
})

window.addEventListener('online',function(e){
    console.log('监听网络连接：',e);
})

2.页面重载

现在我们已经监听了网络的状态，网络关闭时只需要在 offline 事件中提示用户即可。但是如果是网络中断后又重新连接到网络了，我可以在 online 事件中重新加载当前页面。

不论是原生H5开发还是vue这类框架开发项目，都可以使用如下代码重新加载当前页面代码：

location.reload()

注意：这个方式是重新加载当前页面，类似于F5刷新。

如有不对的地方或者遗漏的，大家可以在我的公众号留言哦