axios解决多次请求的问题

在使用axios进行前端网络请求时，可能会遇到多次重复请求的问题。这通常发生在快速连续的事件触发下，如按钮连续点击或者滚动事件连续触发等情况。为了解决这个问题，可以采用几种策略：

1. 防抖（Debounce）: 当请求函数被连续触发时，只有最后一次触发有效，前面的请求都被忽略。
2. 节流（Throttle）: 确保一定时间内只发送一次请求，即使请求被连续触发。
3. 取消已发出的请求（CancelToken）: 如果新的请求被发出，取消之前已发出的请求。

以下是使用axios实现防抖和节流的示例代码：

防抖实现：

// 防抖函数
function debounce(fn, wait) {
  let timeout = null;
  return function() {
    let context = this;
    let args = arguments;
    if (timeout) clearTimeout(timeout);
    let callNow = !timeout;
    timeout = setTimeout(() => {
      timeout = null;
    }, wait);
    if (callNow) fn.apply(context, args);
  };
}
 
// 使用axios发送请求的函数
function sendRequest() {
  axios.get('/api/data')
    .then(response => {
      // handle response
    })
    .catch(error => {
      // handle error
    });
}
 
// 防抖处理后的请求函数
let debouncedRequest = debounce(sendRequest, 300);
 
// 触发请求
debouncedRequest();

节流实现：

// 节流函数
function throttle(fn, wait) {
  let previous = 0;
  return function() {
    let context = this;
    let args = arguments;
    let now = new Date();
    if (now - previous > wait) {
      fn.apply(context, args);
      previous = now;
    }
  };
}
 
// 使用axios发送请求的函数
function sendRequest() {
  axios.get('/api/data')
    .then(response => {
      // handle response
    })
    .catch(error => {
      // handle error
    });
}
 
// 节流处理后的请求函数
let throttledRequest = throttle(sendRequest, 1000);
 
// 触发请求
throttledRequest();

使用CancelToken取消请求：

const CancelToken = axios.CancelToken;
let cancel;
 
axios.get('/api/data', {
  cancelToken: new CancelToken(function executor(c) {
    // 保存cancel函数
    cancel = c;
  })
});
 
// 需要取消请求时执行cancel函数
cancel();

在实际应用中，根据具体场景选择合适的策略，并在代码中适当位置使用防抖、节流或CancelToken来解决多次请求的问题。