5

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

 2 years ago
source link: https://www.fly63.com/article/detial/12115
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

扫一扫分享

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)
        })
}

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK