前端js如何检测网络状况

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>