h5+ vue app 续上期解决网络是否在线给出提示，笔记

本文链接：https://blog.csdn.net/cscscssjsp/article/details/104680189

1.初始时js获取网络是否在线

也就是在启动app时获取当前网络状态，并缓存在sessionStroage，在app.vue中

created(){
    var line = navigator.onLine;
}

2.监听网络状态

代码同样在app.vue ---create中

 _this.plusReady(()=>{
        document.addEventListener("netchange", onNetChange, false);
        function onNetChange(){
          let nt = plus.networkinfo.getCurrentType();
          switch (nt){
            case plus.networkinfo.CONNECTION_ETHERNET:
            case plus.networkinfo.CONNECTION_WIFI:
              line = true;
              break;
            case plus.networkinfo.CONNECTION_CELL2G:
            case plus.networkinfo.CONNECTION_CELL3G:
            case plus.networkinfo.CONNECTION_CELL4G:
              line = true;
              break;
            default:
              line = false;
              break;
          }
        }
      })

3.存储当前状态值

利用sessionStorage缓存当前状态值

sessionStorage.setItem("online",JSON.stringify(line));

4.在axios请求拦截器中统一处理，当断网时给出提示

在axios响应拦截中

 
}, error => {
  // console.log("错误信息：")
  // console.log(JSON.stringify(error))
  if(error.response && error.response.status){
    switch (error.response.status) {
      case 504:
        _this.$toast({message: '网络错误,请联系管理员！', type: 'error'})
        break
      case 404:
        _this.$toast({message: '系统繁忙，稍后重试！', type: 'error'})
        break
      default:
        _this.$toast({message: '系统异常，稍后重试', type: 'error'})
        break
    }
  }else if(!JSON.parse(sessionStorage.getItem('online'))){
    _this.$toast({message: '网络无法连接，请检查网络', type: 'error'});
  }
  else {
    _this.$toast({message: '系统异常，稍后重试', type: 'error'});
  }

  return Promise.reject(error)
})