封装一个可手动取消的axios请求

最新推荐文章于 2024-08-12 11:00:27 发布

神经介质

最新推荐文章于 2024-08-12 11:00:27 发布

阅读量401

点赞数 1

分类专栏： Vue axios 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_45850738/article/details/114396558

版权

Vue 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

axios

1 篇文章 0 订阅

订阅专栏

需求描述： 在这里插入图片描述
文件上传过程中，不断请求一个接口，获取实时的导入结果，并以进度条的形式展示在页面上。

思路： 设置计时器，不断向后台发起请求，一旦返回的请求结果为100%就清除计时器，这时会有大量正在pending中的请求，会占用大量的资源，需要手动取消请求。

封装请求： 以get请求为例，与普通请求相比会多设置一个cancelTaken。

export const getRequestCanCancel = (url, params, that) => {
    let accessToken = Cookies.get('accessToken');
    return axios({
        method: 'get',
        url: `${ApiBaseUrl}${url}`,
        params: params,
        cancelToken: new axios.CancelToken(function executor(c) { // 设置 cancel token
            that.source = c; //这里的source为使用接口的页面设置的，需要取消请求的时候直接调用在这里已被赋值为函数的source就行了
        }),
        headers: {
            'Authorization': accessToken
        }
    });
};

接口：

export const analysisResumeNum = (params, that) => {
    return getRequestCanCancel('/analysisResumeNum', params, that)
}

在data中初始化source为null：

data{
	return {
		successNum: 0,
      	totalNum: 0,
		guId: null,
		myInterval: null,
		source: null
	}
}

接口应用：

getAnalysisResumeGuId() {
      let that = this;
      that.myInterval = setInterval(() => {
        analysisResumeNum({guId: that.guId}, that).then(res => {  // 
          if(res.success) {
            that.successNum = Number(res.result);
            if(that.totalNum == that.successNum) { //符合条件后清除计时器，然后终止未完成请求
              clearInterval(that.myInterval);
              that.cancelRequest();
            }
          }
        })
      }, 50);
},
cancelRequest() {
      if (typeof this.source === 'function') {  // 先判断source是否已被设置为函数
          this.source('终止请求'); // 调用source函数以终止请求
      }
}