vue+Axios取消请求CancelToken

前言

上篇文章更新了一篇关于上传的时候加进度条用了axios原生的方法+element的进度条组件，有兴趣的可以看看。今天测试在测bug的时候发现文件如果太大，想取消文件，这时候接口没处理cancel，会一直在上传除非刷新页面，为了更好的用户体验，今天写了一个上传的时候取消上传的需求。

操作

我接着上篇文章的案例，在此基础上继续封装。

export function uploadProgress(type, url, req, progress, cancel, timeout, headers) {
  let h = headers || {
    'Content-Type': 'application/json',
    BsmAjaxHeader: true,
  }
  const flag = url.includes('forward')
  h = setHeaderData(h, flag)
  const r = req || {}
  return axios({
    url: `paas-web${url}`,
    method: type,
    data: r,
    headers: h,
    timeout,
    onUploadProgress: progress,
    cancelToken: cancel.token
  })
}

注意这边多加了一个 cancel 的入参，在axios的方法里面加了一个 cancelToken 属性

拿到你统一写接口的文件内引入 uploadProgress 方法

  upload(req, cancelToken, back) {
    return uploadProgress(
      'POST',
      '/devopsplatform/artifactory/uploadImage',
      req,
      back,
      cancelToken
    )
  },

接着在.vue文件内引入接口upload，比如说在上传的方法事件里面写

    handleSureUpload(isCancel) {
      // 创建取消令牌
      this.cancelToken = axios.CancelToken.source();  // 重点
      this.$refs.uploadForm.validate((valid) => {
        if (valid) {
          this.uploadSureLoading = true;
          const params = new FormData();
          params.append("file", xxx);
          this.$http
            .uploadDocker(params, this.cancelToken, (progress) => {
              const progress1 = `${(
                (progress.loaded / progress.total) *
                100
              ).toFixed(2)}`;
              this.percentage = +progress1;
            })
            .then((res) => {
              if (res.data.code === 200) {
                 //相应操作
              } else {
                 //相应操作
              }
            })
            .finally(() => {
                 //相应操作
            });
        } else {
          return false;
        }
      });
    },

在取消的方法里面写

  cancelUpload() {
      // 取消请求
      if (this.cancelToken) {
        this.cancelToken.cancel('取消上传');
      }
    },

测试过了，接口的状态会变成cancel

希望能够帮助到各位，有问题可以在评论区留言噢