【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;
目录结构是这样的
文章图片
- 在axios 网络请求文件中进行分发事件
1. 请求成功的时候触发 ``` axiosEmitter.emit("axiosEmitter11"); ```
文章图片
2. 响应失败的时候触发 (注意这里是响应)
```
axiosEmitter.emit("axiosEmitter");
//发送断网请求
```
文章图片
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 来控制每次显示断网的页面样式的
如果有不对的还请指出大家一起交流
推荐阅读
- echarts|vue-charts的使用(在vue项目中使用echarts)
- Vue实现路由懒加载的方式以及打包问题
- 前端|vue数据渲染
- javascript|精读《useRef 与 createRef 的区别》
- html5|基于 HTML5 Canvas 的 3D 热力云图效果
- vue小项目|vue小项目(二)—— 购物车的完整实现
- 入坑vue3|vue3 数据响应更复杂了吗()
- vue.js|Vue 2.7 is Now in Beta
- 入坑vue3|vue3入门,其实吧,压力也没那么大