Vue.js - 检测是否断开连接

【问题标题】：Vue.js - Detect if disconnectedVue.js - 检测是否断开连接
【发布时间】：2017-12-12 08:39:12
【问题描述】：

我有一个 Laravel / Vue.js 网站，我需要检测我们何时失去与服务器的连接并在前面显示警告。

但我找不到合适的方法来做到这一点。我看到我应该像那样使用 axios 但我不知道在我的 vue 中放在哪里...

axios.request(options).catch(function(error) {
if (!error.response) {
  // Connect
} 
else {
  // Disconnect
}

感谢您的帮助

【问题讨论】：

【解决方案1】：

浏览器中有一个名为onLine 的属性，它是一个布尔值，用于告知连接状态。

这里：navigator.onLine 根据连接状态返回一个布尔值。

UPD：还有一些事件，如HTMLElement.ononline 和HTMLElement.onoffline.

【讨论】：

很好，我可以在每次点击窗口的事件中使用这些吗？连续测试我是否在线？（我说的是性能）
没什么大不了的，因为它都是基于事件的，所以你可以设计一个方法，在窗口上触发 onclick 时，将返回 navigator.onLine 的值。所以你也可以使用点击方法。