Axios 如何避免同时发送多个重复的 AJAX 请求？

在使用Axios进行AJAX请求时，确实可能会遇到同时发送多个重复请求的情况。这通常发生在用户无意中多次点击按钮，或者应用程序在未处理好状态更新时重复触发请求。为了避免这种情况，可以采用以下几种策略：

1. 使用标志变量（flags）或状态（state）

在请求开始之前，设置一个标志变量或状态表示正在进行请求。在接收到响应或请求失败时，该变量或状态将被清除。如果请求正在进行中，后续尝试发起的请求将会被忽略。

示例代码：

javascript
let isRequesting = false;

function fetchData() {
  if (isRequesting) {
    return; // 如果已经在请求中，则直接返回，避免重复请求
  }

  isRequesting = true;
  axios.get('/api/data')
    .then(response => {
      // 处理响应数据
    })
    .catch(error => {
      // 处理错误
    })
    .finally(() => {
      isRequesting = false; // 请求结束，无论成功或失败都清除标志
    });
}

2. 使用取消令牌（Cancel Token）

Axios 提供了取消令牌的功能，可以用于取消正在进行的请求。当你希望避免发送重复请求时，可以在发起新请求前，先检查是否有前一个相同的请求正在进行，并取消之前的请求。

示例代码：

javascript
const CancelToken = axios.CancelToken;
let cancel;

function fetchData() {
  if (cancel) {
    cancel(); // 取消之前的请求
  }

  axios.get('/api/data', {
    cancelToken: new CancelToken(function executor(c) {
      cancel = c;
    })
  })
  .then(response => {
    // 处理响应数据
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('Request canceled', error.message);
    } else {
      // 处理其他错误
    }
  })
  .finally(() => {
    cancel = null; // 完成后清除 cancel 函数
  });
}

3. 防抖（Debounce）或节流（Throttle）

如果重复的请求是因为用户快速连续点击触发的，可以使用防抖或节流技术。防抖会在一定时间内多次触发只执行最后一次，而节流会确保在指定时间内只执行一次。

示例代码（使用lodash的debounce函数）：

javascript
import _ from 'lodash';

const fetchDataDebounced = _.debounce(() => {
  axios.get('/api/data')
    .then(response => {
      // 处理响应数据
    })
    .catch(error => {
      // 处理错误
    });
}, 300);

// 事件处理函数
function handleButtonClick() {
  fetchDataDebounced();
}

通过使用上述策略之一或组合使用，可以有效地避免在使用Axios时发送多个重复的AJAX请求。