Tab切换过快导致数据紊乱

例：切换官方时正在loading改为切换HASH

这是一个典型左侧切换tab，右侧内容区根据tab切换刷新请求数据，当我们切换tab内容正在loading中再次切换其他tab就会导致数据紊乱

初步解决以为是第二个接口比第一个快导致，所以我写了一个任务队列

// 创建搜索请求队列
const Queue = [];

// 队列中的搜索请求处理函数
export const  processQueue = ()=> {
  if (Queue.length > 0) {
    const Request = Queue[Queue.length - 1]; // 取出队列中最后一个搜索请求
    console.log(Request);
    Request()
      .then(() => {
        // 搜索请求成功后继续处理下一个搜索请求
        Queue.pop();
        processQueue();
      })
      .catch(() => {
        // 处理搜索请求失败的情况
      });
  }
};

// 添加搜索请求到队列
export const  addToQueue = (Request) =>{
  Queue.push(Request);
  if (Queue.length === 1) {
    // 如果当前队列为空，则开始处理队列
    processQueue();
  }
};

// 在搜索框输入时调用的函数
export const  queueRequest = (asyncFun) =>{
  // 定义搜索请求函数并添加到队列
  const Request =  asyncFun;
  addToQueue(Request);
};

当我们试用queueRequest 函数连续调取接口时，第一个接口完成才回去执行第二个接口，但是bug依在。

网上还有一种方法就是要修改底层axios去解决，这种方法不顺我心，所以没去做。

最后解决方法还是我把问题想的太复杂了，在接口函数中增加tab的校准再赋值

    //切换tab
    handleChangeTab (tab) {
      this.currentTab = tab;
      this.getList();
    },
    async getList () {
      //增加tab标识
      const tab = this.currentTab;
      const params = {
        xx:xx
      };
      this.loading = true;
      try {
        const result = await this.$api.xxxx(params)
        if (result.status == 10000) {
          // fix:  避免快速点击照成界面数据错误
          if (this.currentTab === tab) {
            this.listData = result.data;
          }
        }
      } catch (error) {
        return [];
      } finally {
        if (this.currentTab === tab) {
          this.loading = false;
        }
      }
    },