CancelToken常用在封裝的請求中,用來取消上一一面axios請求
在路由跳轉時,若當前頁面的數據量過大,而我們立即點擊跳轉下一頁面,那么可能會出現,當前頁面接口還在pending狀態,頁面已經跳到新頁面,舊的請求依舊沒有停止。
這將會十分損耗性能,這時我們應該先取消掉之前還沒有獲得相應的請求,再跳轉頁面。這就是CancelToken的作用
1. 在main.js里寫一個全局httpRequestList的空數組,用來裝我們的cancel函數:
// cancelToken中的cancel函數 Vue.$httpRequestList = [];
2. 在封裝的get和post請求里面,將cancel函數推入httpRequestList數組:
/** * 封裝get方法 * @param url * @param data * @returns {Promise} */ export function get(url, params) { const CancelToken = axios.CancelToken; return new Promise((resolve, reject) => { axios.get(url, { params: params, cancelToken: new CancelToken(function executor(c) { Vue.$httpRequestList.push(c) //存儲cancle }) }) .then(response => { resolve(response.data); }) .catch(err => { reject(err) }) }) } /** * 封裝post請求 * @param url * @param data * @returns {Promise} */ export function post(url, data) { const CancelToken = axios.CancelToken; return new Promise((resolve, reject) => { axios.post(url, data, { cancelToken: new CancelToken(function executor(c) { Vue.$httpRequestList.push(c) }) }) .then(response => { resolve(response.data); }) .catch(err => { reject(err); }) }) }
注意,get請求的時候,cancelToken是放在第二個參數里;post的時候,cancelToken是放在第三個參數里。
3. 在路由守衛中,寫一個執行cancel方法的clearHttpRequestingList方法,在每次跳轉之前執行clearHttpRequestingList()函數
router.beforeEach(async (to, from, next) => {
clearHttpRequestingList();
NProgress.start();
next();
})
router.afterEach(() => {
// finish progress bar
NProgress.done()
})
// 清空cancelToken中的cancel函數
function clearHttpRequestingList() {
if (Vue.$httpRequestList.length > 0) {
Vue.$httpRequestList.forEach((item) => {
item()
})
Vue.$httpRequestList = []
}
}