axios.CancelToken取消当前接口调用。

1.首先挂载在全局一个变量,在main.js中

取消axios请求的操作,存放所有cancel函数
 Vue.$httpRequestList = [];

2.其次就是在封装POST方法。


const CancelToken = axios.CancelToken;

//通用方法
/**
 * 
 * @param {*} url 
 * @param {*} params 
 * @param {*} fun 终止方法
 */
export const POST = (url, params) => {
  const getTimestamp = new Date().getTime();
  return instance.post(`${base}${url}?timer=${getTimestamp}`,params,{
    cancelToken: new CancelToken(c => {
      // 调用c就可以取消此请求
      Vue.$httpRequestList.push(c)
    })
  }).then(res => res.data).catch(err=>err)
}

new CancelToken中的C是每次调用接口取消的方法。当我们去循环执行数组里面的方法,就能停掉当前所有的POST请求

3.可以在公共方法类中封装

export const clearHttpRequestingList = () => {
     
  if (Vue.$httpRequestList.length > 0) {
     
    Vue.$httpRequestList.forEach((item) => {
     
      item();  // 执行
    })
    Vue.$httpRequestList = []
  }
}

你可能感兴趣的:(工具的使用,vue.js)