vue中axios多次相同请求中断上一个

问题描述：在开发中，通过不同条件请求相同接口时，相同接口点击频率过快，会导致每次请求返回的时间无法控制，所以最终展示的数据可能不是最后点击返回的数据，导致数据展示错误。

        说白了就是：先发送的请求可能最后返回数据，导致展示的先发送请求返回的数据，后发送请求的数据被覆盖了

解决方案：请求相同接口时，中断上一个相同接口，这样避免数据展示错误

在api文件中代码如下

import axios from 'axios';   //引入axios

// 请求的接口
export const queryCollectionInfoData = (data,that) =>
  service({
    url: '/reportController/selectReport',
    method: 'post',
    data,
    // 设置 cancel token 用于多次请求，中断上一次请求
    cancelToken: new axios.CancelToken(function executor(c) {   
      //传递this增加source属性
      that.source = c;  
    }),
 });

使用接口组件代码如下

data() {
    return {
      source: null, // 保存请求
 };
},
// 请求接口的方法
executeRequest(requestData) {
      // 这里是中断上一个请求  防止多次请求数据显示错误,如果之前有相同请求就中断
      if (this.source) {
        this.source();
      }
      // 请求数据接，请求参数和this
      queryCollectionInfoData(requestData, this)
        .then((res) => {
          console.log(res);      
        })
        .catch((err) => {
          console.log(err);
          //中断取消的提示
          // if (axios.isCancel(err)) {
          //   console.log(axios.isCancel(err), '(axios.isCancel(err)');
          // }else{
          //   this.$message({
          //   type: 'error',
          //   message: '获取数据失败',
          // });
          // }
        });
},