vue.js中使用离线检测

最近开发企业监控软件遇到一个需求，即一个监控系统的首页有许多实时数据展示组成，首页大概每隔10s获取一次数据，但是由于前后端开发模式，需要不断从服务器获取json数据，如果遇到网络中断情况，很可能获取数据失败，因此有必要在断网时前端给出友好提示。通过Html5提供的接口很好地实现这个需求。
Html5在window.navigator对象上添加了一个属性onLine 返回布尔值 true表示在线.同时新增了两个事件：

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

在vue中实现思路如下：

1. data中初始化在线状态。

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

2. mounted中监听事件

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

3. 方法中改变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