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 來控制每次顯示斷網的頁面樣式的

若是有不對的還請指出你們一塊兒交流