js 監聽網絡鏈接狀態

最近公司的後臺管理系統提了這項需求，故從網上搜集了一些方法，如今記錄一下以便往後方便查閱。

首先我把需求貼出來

經過圖中的圖標告知用戶網絡鏈接是否正常，而不是經過信息彈窗的方式提醒，優化了用戶體驗。

廢話就很少說了，直接上代碼，本項目是基於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
    }
  })
複製代碼

}

通過測試，此方法有效。

另外附上網上提供的幾種方法，但本人未去測試，有興趣的童鞋能夠試試

一、navigator.onLine

if （navigator.onLine）{
    ...  //正常工做
} else {
    ... //離線工做
}
複製代碼

navigator.onLine只會在機器未鏈接到局域網或路由器時返回false，其餘狀況下均返回true，挺簡單的一種方法。。。

二、Ajax輪詢

setInterval (function() {

//Ajax...
複製代碼

},1000)

三、利用IMG的onerror事件

鑑於本人水平有限，代碼中若有錯誤或者須要改進的地方歡迎各位童鞋常來共同交流，如需轉載請附上本博客地址，謝謝。