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

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

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://shenqiku.cn/article/FLY_12115