最近公司的后台管理系统提了这项需求，故从网上搜集了一些方法，现在记录一下以便日后方便查阅。

首先我把需求贴出来

通过图中的图标告知用户网络连接是否正常，而不是通过信息弹窗的方式提醒，优化了用户体验。

废话就不多说了，直接上代码，本项目是基于vue.js的

mouted () {

this.checkNetwork()

},

methods: {

// 监听网络连接状态
checkNetwork() {
  const that = this
  const EventUtil = {
    addHandler: function(element, type, handler) {
      if (element.addEventListener) {
        element.addEventListener(type, handler, false)
      } else if (element.attachEvent) {
        element.attachEvent('on' + type, handler)
      } else {
        element['on' + type] = handler
      }
    }
  }
  EventUtil.addHandler(window, 'online', function(e) {
    if (e.type === 'online') {
      that.network = true
    } else {
      that.network = false
    }
  })
  EventUtil.addHandler(window, 'offline', function(e) {
    if (e.type === 'offline') {
      that.network = false
    } else {
      that.network = true
    }
  })

}

经过测试，此方法有效。

另外附上网上提供的几种方法，但本人未去测试，有兴趣的童鞋可以试试

1、navigator.onLine

if （navigator.onLine）{
    ...  //正常工作
} else {
    ... //离线工作
}

navigator.onLine只会在机器未连接到局域网或路由器时返回false，其他情况下均返回true，挺简单的一种方法。。。

2、Ajax轮询

setInterval (function() {

//Ajax...

},1000)

3、利用IMG的onerror事件

鉴于本人水平有限，代码中如有错误或者需要改进的地方欢迎各位童鞋常来共同交流，如需转载请附上本博客地址，谢谢。