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

Posted 2023-03-29

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

index.html:

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