CancelToken的运用实践

Posted 2020-12-22 qlongbg

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

  }

}