uniapp监听网络状态_是否断网判断

更新日期: 2022-09-16阅读: 652标签: 网络分享

复制链接

新浪微博

QQ 好友

扫一扫分享

uniapp 本身是跟网络状态相关的api有两个：
getNetworkType

uni.getNetworkType({
    success: function (res) {
        console.log(res.networkType);
    }
});

onNetworkStatusChange

uni.onNetworkStatusChange(function (res) {
    console.log(res.isConnected);
    console.log(res.networkType);
});

进行网络监听的话自然是使用到onNetworkStatusChange 这个api的，但是这个网络监听它是全局的监听的，比较珍贵，因此需要进行事件的分发。
这里使用分发事件的：

eventEmitter.js

function EventEmitter() {
    this.listeners = {};
    this.maxListener = 10;
}

EventEmitter.prototype.on = function (event, cb) {
    let listeners = this.listeners;
    if (listeners[event] && listeners[event].length >= this.maxListener) {
        console.error('监听器的最大数量是%d,您已超出限制', this.maxListener)
    }

    if (listeners[event] instanceof Array) {
        if (listeners[event].indexOf(cb) === -1) {
            listeners[event].push(cb);
        }
    } else {
        listeners[event] = [].concat(cb);
    }
}

EventEmitter.prototype.addListener = EventEmitter.prototype.on;
EventEmitter.prototype.emit = function (event) {
    let args = Array.prototype.slice.call(arguments);
    args.shift();
    this.listeners[event].forEach(cb => {
        cb.apply(null, args);
    });
}

EventEmitter.prototype.removeListener = function (event, listener) {
    let listeners = this.listeners;
    let arr = listeners[event] || [];
    let i = arr.indexOf(listener);
    if (i >= 0) {
        listeners[event].splice(i, 1);
    }
}

EventEmitter.prototype.once = function (event, listener) {
    var self = this;
    function fn() {
        var args = Array.prototype.slice.call(arguments);
        listener.apply(null, args);
        self.removeListener(event, fn);
    }
    this.on(event, fn)
}

EventEmitter.prototype.removeAllListener = function (event) {
    this.listeners[event] = [];
}

EventEmitter.prototype.listeners = function (event) {
    return this.listeners[event];
}

EventEmitter.prototype.setMaxListeners = function (num) {
    this.maxListener = num;
}
export default EventEmitter

我希望的是在指定的组件中：可以监测网络状态，当发现断网，做一些事情，当发现网络恢复做另一些事情。

在main.js中引入并绑定在原型上

import { networkStatusChangeEmitter } from '@/utils/onNetworkStatusChange.js'

vue.prototype.$networkStatusChangeEmitter = networkStatusChangeEmitter // 进行网络状态的监听

在组件里在组件销毁时需要将事件注销为了更方便的使用这里进行了一层封装：

import EventEmitter from './eventEmitter.js'
const networkStatusChangeEmitter = new EventEmitter()
uni.onNetworkStatusChange(function (res) {
   networkStatusChangeEmitter.emit('networkStatusChange',res)
});

// 组件生命周期内的网络状态监听
function onLiveNetWorkStatusChange(context,cb){
    const listener = (res)=>{
    cb(res)
}
context.$on('hook:mounted',()=>{
    context.$networkStatusChangeEmitter.addListener('networkStatusChange',listener)
})

context.$on('hook:beforeDestroy',()=>{
    context.$networkStatusChangeEmitter.removeListener('networkStatusChange',listener)
})
}
export  { onLiveNetWorkStatusChange,  networkStatusChangeEmitter  }

使用姿势：

mounted(){
        onLiveNetWorkStatusChange(this,(res)=>{
            console.log(res)
        })
}

链接: https://www.fly63.com/article/detial/12115

uniapp监听网络状态_是否断网判断

浅谈对soket的理解

kubernetes之Flannel网络插件部署

JS 测试网络速度与网络延迟

2019最新网络赚钱方法有哪些？推荐几种靠谱赚钱方式！

Angular网络请求

全面分析前端的网络请求方式

由Web Beacon-网络臭虫引发的思考

Deepfake_深度神经网络换脸

从狭义SDN到广义SDN，网络自动化趋势下的SDN

计算机网络常见问题