js监听网络连接状态

最新推荐文章于 2025-06-07 21:09:35 发布

原创

最新推荐文章于 2025-06-07 21:09:35 发布 · 4.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文记录如何在Vue.js项目中监听网络连接状态，旨在优化用户体验，避免使用信息弹窗提示。文中提供了通过监听Vue实例的方法以及navigator.onLine、Ajax轮询和IMG的onerror事件等不同方法，并分享了实际项目中验证有效的代码段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

首先我把需求贴出来

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

废话就不多说了，直接上代码，本项目是基于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.ne