javascript|vue 移动端断网后处理

【javascript|vue 移动端断网后处理】小白的第一个项目,记录一下
方案一:
使用了定时器一直请求一个空接口,请求不到的时候就弹框提醒

1:直接再app.vue中mounted 钩子函数中使用定时器一直请求一个空的接口

this.isLine() setInterval(() \=> { this.isLine() }, 10000); 空的接口如果请求成功就是联网,失败就是当作断网处理 isLine () {this.$axios( this.httpTest+'/Index', {}, 'get' ).then((res) => { this.$store.commit('setSystemLine', true) }).catch((err) => { this.$toast('网络已断开') this.$store.commit('setSystemLine', false)//控制断网后的页面样式的 }) }

方案二:
使用了全局事件分发,每次在请求的时候都会触发这个事件,这样就不用定时器一直请求服务器了
做法:
1. 新建一个axiosEmitter.js 文件

constEventEmitter=require('events'); classAxiosEmitterextendsEventEmitter { constructor() { super(); //must call super for "this" to be defined. } } constaxiosEmitter=newAxiosEmitter(); exportdefaultaxiosEmitter;

目录结构是这样的
javascript|vue 移动端断网后处理
文章图片

  1. 在axios 网络请求文件中进行分发事件
    1. 请求成功的时候触发 ``` axiosEmitter.emit("axiosEmitter11"); ```

javascript|vue 移动端断网后处理
文章图片

2. 响应失败的时候触发 (注意这里是响应) ``` axiosEmitter.emit("axiosEmitter"); //发送断网请求 ```

javascript|vue 移动端断网后处理
文章图片

3. 我这里是再app.vue中mounted钩子中接受事件的

this.$axiosEmitter.on("axiosEmitter", () => { //断网的时候 console.log("axiosEmitter 断网"); this.$toast('网络已断开') this.$store.commit('setSystemLine', false) })this.$axiosEmitter.on("axiosEmitter11", ()=> { console.log("axiosEmitter11 已链接网络"); this.$store.commit('setSystemLine', true)})

我是使用了vuex 来控制每次显示断网的页面样式的
如果有不对的还请指出大家一起交流

    推荐阅读