如何检测“net::ERR_CONNECTION_REFUSED”答案

【问题标题】：How to detect "net::ERR_CONNECTION_REFUSED"如何检测“net::ERR_CONNECTION_REFUSED”
【发布时间】：2021-03-23 12:51:17
【问题描述】：

我正在使用 Vue 2，我想检测 sockjs 错误并显示通知。（如“连接丢失”、“连接超时”等）我不知道该怎么做

【问题讨论】：

标签： javascript vue.js vuejs2 sockjs

【解决方案1】：

浏览器有一个名为navigator.onLine 的内置方法，它返回true 或false。现在要注意连接更改，您可以在窗口上添加事件侦听器，

window.addEventListener('offline', (e) => { console.log('offline'); });
window.addEventListener('online', (e) => { console.log('online'); });

您可以将其合并到 Vue 组件中，例如：

export default {
  data() {
    return {
      online: navigator.onLine
    };
  },
  mounted() {
    window.addEventListener("online", this.onchange);
    window.addEventListener("offline", this.onchange);
    this.onchange();
  },
  beforeDestroy() {
    window.removeEventListener("online", this.onchange);
    window.removeEventListener("offline", this.onchange);
  },
  methods: {
    onchange() {
      this.online = navigator.onLine;
      this.$emit(this.online ? "online" : "offline");
    }
  }
};

然后使用v-if="!online" 选择性地呈现您的离线横幅。

或者，看看：v-offline，它通过 ping 端点来工作，其优点是能够检测用户何时在线但互联网连接（加载）非常差，但总体而言效率较低的方法。

import offline from 'v-offline';

export default {
  components: {
    offline
  },

  methods: {
    handleConnectivityChange(status) {
      console.log(status);
    }
  }
}

对于大多数 sock.js 方法，您可以从回调返回的 Event 参数中获取此信息。但对于检测网络连接和其他常见任务，通常在本机上执行更为稳健，如上所述。

【讨论】：