參考:https://www.cnblogs.com/zlfProgrammer/p/11058413.html。
參考:https://blog.csdn.net/harsima/article/details/93717217。
我們經常會遇到當前頁面未加載完畢時跳轉路由或者返回操作, 但是通過network會發現, 若網絡環境較差的情況下, 會一直pending, 切換路由後在network中添加新的請求但是正在pending的請求依然存在. 當我們在項目中做了一個上拉加載分頁的時候會一直加載中, 用戶等待不耐煩後可能會主動觸發返回操作, 但是此刻即使用戶觸發返回操作, 加載分頁的請求還是存在, 頁面還是會一直提示加載中, 直到該請求加載成功或超時才肯罷休。最終給用戶造成一些不必要的結果,同時也對web性能造成一定的影響。那麼如何解決這個問題呢,方法就是監聽路由,在路由切換前將上個頁面的請求取消。
第一步:axios請求頭設置。
import axios from 'axios'
import { store } from './store' // 引入vuex
var CancelToken = axiosss.CancelToken;
const source = CancelToken.source()
let reqList = []
const stopRepeatRequest = function (reqList, url, cancel, errorMessage) {
const errorMsg = errorMessage || ''
for (let i = 0; i < reqList.length; i++) {
if (reqList[i] === url) {
cancel(errorMsg)
return
}
}
reqList.push(url)
}
const allowRequest = function (reqList, url) {
for (let i = 0; i < reqList.length; i++) {
if (reqList[i] === url) {
reqList.splice(i, 1)
break
}
}
}
axios.interceptors.request.use(//請求攔截
config => {
if (window.localStorage.getItem("token")) {
config.headers.common["Authorization"] = window.localStorage.getItem(
"token"
);
}
config.cancelToken = new axios.CancelToken(function (cancel) {
store.commit('pushToken', {cancelToken: cancel})
})
stopRepeatRequest(reqList, config.url, source.cancel, `${config.url} 請求被中斷`)
return config
}
axios.interceptors.response.use(//響應攔截
response => {
setTimeout(() => {
allowRequest(reqList, response.config.url)
}, 1000)
return response;
},
error => {
if (axiosss.isCancel(error)) {
console.log('取消了請求', error.message);
}else if (error.response) {
switch (error.response.data.status) {
case -1:
window.localStorage.removeItem("token");
router.replace({
path: "/",
query: { redirect: router.currentRoute.fullPath } //登錄成功後跳入瀏覽的當前頁面
});
}
setTimeout(() => {
allowRequest(reqList, error.config.url)
}, 1000)
return Promise.reject(error.response.data);
}
error.ace = error.message
return Promise.reject(error);
}
);
第二步:利用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()
})