axios 处理重复请求的方法汇总

在前端开发中，使用 axios 发送网络请求是常见的操作。然而，有时可能会遇到重复请求的情况，这不仅可能导致资源浪费，还可能影响用户体验。下面将汇总一些处理 axios 重复请求的有效方法。

一、使用请求队列

创建一个请求队列来存储正在进行的请求。在发送新请求之前，先检查该请求是否已经在队列中。如果在队列中，则不再重复发送，而是等待之前的请求完成。

const requestQueue = {};

function sendRequest(url, params) {
  if (requestQueue[url]) {
    return;
  }

  requestQueue[url] = true;

  axios({
    url,
    params
  })
 .then(response => {
    delete requestQueue[url];
  })
 .catch(error => {
    delete requestQueue[url];
  });
}

二、设置请求标识

为每个请求设置一个唯一的标识，在发送请求时将标识传递给服务器。服务器端可以根据标识判断是否为重复请求，并进行相应处理。

function generateRequestId() {
  return Math.random().toString(36).substr(2, 9);
}

function sendRequest(url, params) {
  const requestId = generateRequestId();

  axios({
    url,
    params,
    headers: { 'Request-Id': requestId }
  })
 .then(response => {
    // 处理响应
  })
 .catch(error => {
    // 处理错误
  });
}

三、防抖与节流

利用防抖或节流的思想来控制请求的发送频率。防抖是在短时间内多次触发请求时，只执行最后一次；节流是在固定时间间隔内只允许发送一次请求。

let timer;

function debouncedSendRequest(url, params) {
  clearTimeout(timer);

  timer = setTimeout(() => {
    axios({
      url,
      params
    })
   .then(response => {
      // 处理响应
    })
   .catch(error => {
      // 处理错误
    });
  }, 300);
}

四、取消之前的请求

在发送新请求时，取消之前未完成的相同请求。

let cancelToken;

function sendRequest(url, params) {
  cancelToken = axios.CancelToken.source();

  axios({
    url,
    params,
    cancelToken: cancelToken.token
  })
 .then(response => {
    // 处理响应
  })
 .catch(error => {
    if (axios.isCancel(error)) {
      // 处理请求取消
    } else {
      // 处理其他错误
    }
  });

  // 发送新请求前取消之前的请求
  if (previousCancelToken) {
    previousCancelToken.cancel('取消之前的请求');
  }

  previousCancelToken = cancelToken;
}

通过以上几种方法，可以有效地处理 axios 中的重复请求问题，提高应用的性能和稳定性，为用户提供更好的体验。在实际开发中，根据项目的具体需求选择合适的方法来处理重复请求。