前端對於頁面斷網的處理

一、咱們先來看看人家應用是怎麼處理的

• 正常訪問

  

• 斷網時，會有個從新加載，當網絡正常時，點擊會回到原來的頁面

  

---

下面說下思路吧 ，這裏用的是vue

1.新建refresh.vue斷網頁面,當斷網時，咱們跳轉到這個頁面。

2.監聽接口，在vuex中新建一個networkSuccess參數，斷網爲false,聯網爲true。

3.根據networkSuccess來斷定跳不跳轉到refresh.vue頁面。

二、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: {

  }
})

複製代碼

三、斷網頁面-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>
複製代碼

四、利用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封裝本人蔘考了vue中Axios的封裝和API接口的管理