vue路由跳轉取消上個頁面的請求

　　咱們常常會遇到當前頁面未加載完畢時跳轉路由或者返回操做, 可是經過network會發現, 若網絡環境較差的狀況下, 會一直pending, 切換路由後在network中添加新的請求可是正在pending的請求依然存在. 當咱們在項目中作了一個上拉加載分頁的時候會一直加載中, 用戶等待不耐煩後可能會主動觸發返回操做, 可是此刻即便用戶觸發返回操做, 加載分頁的請求仍是存在, 頁面仍是會一直提示加載中, 直到該請求加載成功或超時才肯罷休。最終給用戶形成一些沒必要要的結果，同時也對web性能形成必定的影響。

　　那麼如何解決這個問題呢，方法就是監聽路由，在路由切換前將上個頁面的請求取消。

　　第一步：

　　axios請求頭設置　　

import axios from 'axios'
import { store } from './store'    // 引入vuex

axios.interceptors.request.use(
  config => {
    config.cancelToken = new axios.CancelToken(function (cancel) {
      store.commit('pushToken', {cancelToken: cancel})
    })
    return config
  }
)

　　第二步：

　　利用vuex，新建一個store.js，將取消方法cancel放到數組中，而後在路由守衛中把數組中存有的cancel方法都執行

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export const store = new Vuex.Store({ state: { cancelTokenArr: [] // 取消請求token數組
 }, mutations: { pushToken (state, payload) { state.cancelTokenArr.push(payload.cancelToken) }, clearToken ({ cancelTokenArr }) { cancelTokenArr.forEach(item => { item('路由跳轉取消請求') }) cancelTokenArr = [] } } })

　　第三步：

　　監聽路由　　

router.beforeEach(function (to, from, next) {
  store.commit('clearToken') // 取消請求
  next()
})

　　到此就能夠解決路由跳轉後上個頁面的請求還在pending的狀態啦

　　

　　

　　若是有問題，能夠聯繫我：

　　QQ：412606846（微信同號）