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 文件

const  EventEmitter=  require('events');
class  AxiosEmitter  extends  EventEmitter {
constructor() {
super(); //must call super for "this" to be defined.
}
}
const  axiosEmitter=  new  AxiosEmitter();
export  default  axiosEmitter;

目录结构是这样的

1. 在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 来控制每次显示断网的页面样式的

若是有不对的还请指出你们一块儿交流