CancelToken的運用實踐


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 = []
  }
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM