前端js如何检测网络状况

jlhejs

于 2019-12-26 16:29:20 发布

阅读量3.1k

点赞数 1

分类专栏： JavaScript 前端开发

本文链接：https://blog.youkuaiyun.com/kouhunzhe/article/details/103717994

版权

JavaScript 同时被 2 个专栏收录

24 篇文章

订阅专栏

前端开发

24 篇文章

订阅专栏

本文介绍了一种使用Vue和原生JavaScript检测网络在线状态的方法。通过监听'online'和'offline'事件，可以实时更新应用程序中网络连接的状态。这对于创建响应式和适应不同网络条件的应用非常有用。

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

js(包括vue)如何检测网络状况如离线.

<template>
    <div id="editor-main">
      {{onLine}}
      <QuillEditor></QuillEditor>
    </div>
</template>
<script>
    export default {
      name:"Main",
      props: {
        editor: {
          required: true,
          type: Object,
        }
      },
      data() {
        return {
          onLine: navigator.onLine,
        }
      },
      created() {
        
      },
      methods:{
        updateOnlineStatus(e) {
          const { type } = e;
          this.onLine = type === 'online';
        },
      },
      mounted:function(){
        // 网络由状态改变时触发
        window.addEventListener('online',  this.updateOnlineStatus);
        window.addEventListener('offline', this.updateOnlineStatus);
      },    
      
    }
  </script>