如何避免同一时间接口多次重复请求

问题

当在项目中遇到一个场景，有一个tab页面，tab的切换调用的都是一个接口，只是传入的参数不同，这个时候接口返回很慢，短时间内多次切换tab栏，可能会造成数据渲染错误，页面多次刷新等问题

解决思路

在请求接口时，如果上个接口没有请求介绍，就取消掉上次接口的调用。

实现

接口请求是通过axios发送HTTP请求，可以通过axios的取消令牌来实现这一要求。

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      cancelTokenSource: null, // 用于存储取消令牌源
    };
  },
  methods: {
    fetchData() {
      // 如果有之前的取消令牌源，则取消之前的请求
      if (this.cancelTokenSource) {  
        this.cancelTokenSource.cancel('Operation canceled by the user.');  
      }  
  
      // 创建一个新的取消令牌源  
      this.cancelTokenSource = axios.CancelToken.source();  
  
      // 发送请求，并传入取消令牌  
      axios.get('/some/path', {  
        cancelToken: this.cancelTokenSource.token  
      })  
      .then(response => {  
        console.log(response);  
      })  
      .catch(error => {  
        if (axios.isCancel(error)) {  
          console.log('Request canceled', error.message);  
        } else {  
          // 处理其他错误  
          console.error('Error:', error);  
        }  
      });  
    }  
  }  
};  
</script>

在使用中可以通过try，catch来捕获取消请求，以免在取消请求时控制台出现红色报错。