vue取消接口请求CancelToken

   因业务需求，需要请求多次同一接口，需要在请求接口时，取消上个未完成的接口请求

解决方案一：统一封装

1. 可以利用CancelToken工厂函数创建cancel token

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

const CancelToken = axios.CancelToken; const source = CancelToken.source(); // get 方法使用案例 axios.get('user/12345', {   cancelToken: source.token }).catch(function(thrown) {   if (axios.isCancel(thrown)) {     console.log('Request canceled', thrown.message)   } else {     // TODO: handle error   } }) // post 使用案例 axios.post('/user/12345', {   name: 'name what' }, {   cancelToken: source.token }) // 执行取消请求操作 source.cancel(‘请求已取消’)

解决方案二：单个接口处理

1、api处

import axios from 'axios';


//导出表格
export function DataExport(data, _this) {
    return request({
        url: 'data/export',
        responseType: 'blob',
        method: 'post',
        data: data,
        cancelToken: new axios.CancelToken((c) => {
            _this.cancelFun = c
        }),
    })
}

2、vue调用处理

export default {
  data() {
    return {
      cancelFun: null, //取消接口
    };
  },
  methods: {
    //运行接口
    CatchExport(){
      this.cancelCsv();
        DataCatchExport(this.queryParams, this).then((res) => {
           this.$message({
                type: "success",
                message: "导出成功!",
              });
            })
            .catch((err) => {
              console.log(err);
            });
    },
     //取消接口
    cancelCsv() {
      if (typeof this.cancelFun === "function") {
        this.cancelFun();
      }
    },
  }
}