Vue性能優化之路由切換中斷上一路由請求

        在項目開發過程中有不少引起路由切換卡頓的原因，其中一個就是當你上一路由頁有多個請求或者有大數據量接口請求時，一旦切換路由會發現接口依然處於請求狀態，這就是我們今天要進行優化處理的目標。

        既然是對請求進行處理，很容易就能想到要對axios請求做處理，對路由守衛做處理。還需要將要取消的請求放入全局進行狀態管理，也就是要用到Vuex。

       1.通過axios的文檔可知對axios請求做處理，在項目中單獨有一個封裝axios的js文件（這個開發者自定義的），在此對request做一個條件判斷再對response做一個條件判斷，response做的處理呢，是為了表達當請求失敗時出現何種提示。代碼如下

  // request interceptor
  service.interceptors.request.use((config) => {
     // Do something before request is sent
     config.cancelToken = new axios.CancelToken(cancel => { // 在發送請求設置cancel token
       store.dispatch('setAxiosArr', { cancel })
     })
     return config
  }, error => {
     // Do something with request error
     return Promise.reject(error)
  })

  // response interceptor
  service.interceptors.response.use(
     response => {
       if (response.data.result_code === '201') {
         store.dispatch('logOut').then(() => {
           location.reload()
         })
       }
       return response
     },
     error => {
       if (axios.isCancel(error)) { // 路由切換 請求取消
         return new Promise(() => {})
       } else {
         return Promise.reject(error)
       }
     }
  )

       2.對取消請求進行全局狀態管理，在store.js進行操作，由於項目中進行了modules，我放在了home.js（這個開發者自定義的）。代碼如下：

  const home = {
    state: {
      axiosArr: [] // 儲存cancel token
    },
    mutations: {
      SET_AXIOS_ARR: (state, cancelAjax) => {
        state.axiosArr.push(cancelAjax)
      },
      CLEAR_AXIOS_ARR: (state) => {
        state.axiosArr.forEach(item => {
          item()
        })
        state.axiosArr = []
      }
    },
    actions: {
      setAxiosArr: ({ commit }, cancelAjax) => {
        commit('SET_AXIOS_ARR', cancelAjax)
      },
      clearAxiosArr: ({ commit }) => {
        commit('CLEAR_AXIOS_ARR')
      }
    }
  }

  export default home

       3.最后的一步就是在路由守衛處進行請求取消，代碼如下：

  router.beforeEach((to, from, next) => {
    store.dispatch('clearAxiosArr') // 取消請求
    next()
  })

       

       代碼生效后在控制台可以看到效果如下：

       

 

       注：若頁面做了keep-alive緩存建議不要進行此路由請求優化，當路由切換時中斷上一路由的請求，頁面需要用到請求的數據被中斷從而拿不到數據，而頁面又進行緩存，再次切換回來將看不到數據。emmmmmmm，說不定就會被提bug了喔。

       以上就是詳細的解決方案，親測有效，希望能幫到大家。

       如需轉載請注明出處：https://www.cnblogs.com/zishang91/p/13626030.html，以便有錯誤可以及時修改，若有錯漏不足之處，請見諒並且指點，謝謝！！！