vue实时监听网络状态是wifi还是4G

方法封装在工具类里面，方便在各个页面和项目中使用:
utils.js:

async judgeNetWork () {
    const commonCell = ['cellular', '2g', '3g', '4g', '5g', '3G/2G']
    const userAgent = navigator.userAgent.toLowerCase()
    const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection || {type: 'unknown'}
    let type
    // 判断是否是微信内置浏览器
    const isWeixin = /micromessenger/.test(userAgent)
    return new Promise(async (resolve, reject) => {
      if (isWeixin) {
        await this.getwNetwork()
        resolve()
      } else {
        let newType
        type = (connection && connection.type) || 'unknown'
        console.log('拿到网络状态----', type)
        if (type && commonCell.indexOf(type) !== -1) {
          newType = 'cellular'
        } else if (type === 'wifi') {
          newType = 'wifi'
        } else {
          newType = 'unknown'
        }
        localStorage.setItem('network', newType)
        resolve()
      }
    })
  }


getwNetwork () {
    return new Promise((resolve) => {
      wx.getNetworkType({
        success: function (res) {
          console.log('调用成功----', res)
          let wType = 'wifi'
          if (res.networkType !== 'wifi') {
            wType = 'cellular'
          }
          localStorage.setItem('network', wType)
          resolve()
        },
        fail: function (res) {
          console.log('调用失败----', res)
          localStorage.setItem('network', 'unknown')
          resolve()
        }
      })
    })
  },

index.html:

<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

 async clickAction () {
      let nettype
      await this.$utils.judgeNetWork()
      nettype = localStorage.getItem('network')
      console.log('打印当前网络状态---',nettype)
}

网上的方法很难实现当网络状态发生改变后仍然能判断出新的状态，比如在同一页面，从wifi切到4G，或者从4G切到wifi。如果是在微信浏览器里面，微信会缓存userAgent ，导致切换后还是打印上一次的状态，除非退出页面重新进来。
所以得使用官方提供的wx.getNetworkType({}）方法，除此之外，别无他法。
因为方法为异步，所以采用了Promise的方式，把网络状态储存在localStorage里面，取的话也是从localStorage里面取。
这个方法可以很准确的判断在微信内、安卓浏览器内的网络状态，会返回wifi、cellular（蜂窝流量）、unknown三种类型，2G/3G/4G/5G都属于cellular。
ios可能因为用户隐私问题，无论是自带浏览器还是UC等，只要不在微信内，都返回unknown。如果有人有办法解决这个问题，就请分享一下吧，三克油~