核心：
1：vuex以陣列的形式存放取消函式；
2：axios請求攔截中設定cancelToken；
3：頁面跳轉路由守衛取消上一個頁面所以的請求，
vuex中
在vuex中設定一個存放取消函式的陣列，還有一個添加陣列元素的方法和清空陣列的方法：
這里放到了自定義的home模塊：
export default {
/**
* 定義命名空間，防止多個模塊同名共享，使用時需要帶上命名空間
*/
namespaced: true,
state: {
_axiosPromiseArr:[],
},
mutations: {
add_AxiosPromiseArr(state, item) {
console.log("添加_axiosPromiseArr");
state._axiosPromiseArr.push(item)
},
clear_AxiosPromiseArr(state) {
console.log("_axiosPromiseArr情空");
state._axiosPromiseArr = []
},
},
}
axios的攔截：
import axios from 'axios'
import store from '../../store/index'
let Ajax = axios.create({
baseURL: "http://127.0.0.1:3003/",
timeout: 50000
})
Ajax.interceptors.request.use(async config => {
//重點：重點：重點：重點：重點：重點：重點：重點：重點：
config.cancelToken = new axios.CancelToken(cancel => {
store.commit('home/add_AxiosPromiseArr', { cancel })
})
//重點：重點：重點：重點：重點：重點：重點：重點：重點：
return config;
}, error => {
return Promise.reject(error);
});
Ajax.interceptors.response.use(response => {
return response.data;
}, error => {
return Promise.reject(error);
});
const getTIP = (url, params) => {
Ajax.defaults.headers['token'] = localStorage.getItem('token')
return new Promise((relove, reject) => {
Ajax.get(url, { params, responseType: "arraybuffer", headers: { responseType: 'arraybuffer' } }).then(res => relove(res)).catch(err => reject(err))
})
}
export default {
getTIP
}
路由守衛：
router.js
router.beforeEach((t, f, n) => {
store.state.home._axiosPromiseArr.forEach((ele, index) => {
ele.cancel("跳轉頁面,結束請求") // 路由跳轉之前，清空（終止）上一個頁面正在請求的內容
})
store.commit('home/clear_AxiosPromiseArr')
if (t.path.includes('login') || t.path.includes('zjq')) {
n()
}
if (!localStorage.getItem('token')) {
n('/login')
} else {
n()
}
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/295687.html
標籤：其他
上一篇：iOS多執行緒面試題匯總與決議
下一篇：Android Studio 自己app啟動另一個app 啟動別的應用 啟動自己的另一個app 啟動自己的另一個應用 啟動其他應用 解決方法