前端对于断网的处理方法（js和vue）

在很多场景下，只有机器已经联网以后，web应用才能启动。如果没有联网，就会提示错误。、 但是机器有时候要重启。 如果机器重启后，立刻启动web应用的话，可能，机器上的网络服务还没有准备好。

方法一：

navigator.onLine （HTML5属性）

if (navigator.onLine) {
          
    
//正常工作
console.log(正常联网)
} else {
          
    
//执行离线状态时的任务
console.log(网络断开)
}

这个html5的 navigator的新特性可以很简单帮我们搞定 HTML5为此定义了一个navigator.onLine属性，这个属性值为true表示设备能上网，值为false表示设备离线。

方法二

用vue的方法： 1.新建refresh.vue断网页面,当断网时，我们跳转到这个页面。

2.监听接口，在vuex中新建一个networkSuccess参数，断网为false,联网为true。

3.根据networkSuccess来判定跳不跳转到refresh.vue页面。

1.vuex store.js

import Vue from vue
import Vuex from vuex
 
Vue.use(Vuex)
 
export default new Vuex.Store({
          
   
  state: {
          
   
    networkSuccess: true //是否断网
  },
  mutations: {
          
   
    changeNetworkSuccess(state,val){
          
    //改变状态
      state.networkSuccess = val
    }
  },
  actions: {
          
   
 
  }
})

2.断网页面-refresh.vue

<template>
  <div class="refresh" v-if="!networkSuccess">
      <h3>我断网了</h3>
      <button @click="onRefresh()">点我刷新</button>
  </div>
</template>
<script>
import {
          
   mapState } from vuex;
export default {
          
   
  name: ,
  data() {
          
   
    return {
          
   }
  },
  methods: {
          
   
    onRefresh(){
          
   
      this.$router.go(-1)//返回之前点击的页面
    },
  },
  computed:{
          
   
    ...mapState([networkSuccess])
  },
}
</script>

3.利用axios的拦截器来判断是否断网

import axios from axios;
import router from ../router;
import store from @/store;
   // 响应拦截器
  instance.interceptors.response.use(
    // 请求成功                     --->成功的时候把NetworkSuccess置为true
    res => res.status === 200 ? Promise.resolve(res)&store.commit(changeNetworkSuccess, true) : Promise.reject(res),
    // 请求失败
  
    error => {
          
   
      const {
          
    response } = error;
      console.log(94,response)
      if (response) {
          
   
        // 请求已发出，但是不在2xx的范围 errorHandle为解析错误码
        errorHandle(response.status, response.data.message);
        return Promise.reject(response);
      } else {
          
   
        // 处理断网的情况
        // eg:请求超时或断网时，更新state的network状态
        // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
        // 关于断网组件中的刷新重新获取数据，会在断网组件中说明
        store.commit(changeNetworkSuccess, false);
        tip(网络异常!);
        router.push({
          
   path:refresh})
      }
    });
    
/**
* 请求失败后的错误统一处理
* @param {Number} status 请求失败的状态码
*/
const errorHandle = (status, other) => {
          
   
// 状态码判断
switch (status) {
          
   
  // 401: 未登录状态，跳转登录页
  case 401:
    toLogin();
    break;
  // 403 token过期
  // 清除token并跳转登录页
  case 403:
    tip(登录过期，请重新登录);
    localStorage.removeItem(token);
    store.commit(loginSuccess, null);
    setTimeout(() => {
          
   
      toLogin();
    }, 1000);
    break;
  // 404请求不存在
  case 404:
    tip(请求的资源不存在);
    break;
  /*case 500:
    store.commit(changeNetworkSuccess, false);
    tip(网络异常!);
    router.push({path:refresh})*/
  default:
    console.log(其它错误,other);
}}

axios封装本人参考了