巧妙取消Axios重复请求，让你的前端程序更高效

前端

2024-02-13 05:37:40

理解重复请求

当一个请求被多次触发时，就会发生重复请求。这通常会在以下几种情况下发生：

并发请求： 当用户在短时间内多次发送相同的请求时。
网络延迟： 当网络连接缓慢或不稳定时，请求可能需要更长的时间才能得到响应，这会导致用户重新发送请求。
意外点击： 当用户不小心多次点击同一个按钮或链接时。

重复请求可能会对网站或应用程序的性能产生负面影响。例如，它们可能会：

浪费服务器资源
导致数据不一致性
降低用户体验

取消重复请求的方法

为了避免重复请求，有几种方法可以用来取消它们：

1. 使用 AbortController

AbortController 是 JavaScript 中的一个 API，它允许你取消请求。以下是如何使用它：

创建一个 AbortController 实例。
将 AbortController 实例与请求关联起来。
当需要取消请求时，调用 AbortController 实例的 abort() 方法。

代码示例：

const controller = new AbortController();
const request = axios.get('https://example.com', {
  signal: controller.signal
});

// 取消请求
controller.abort();

2. 使用节流

节流是一种技术，它可以限制请求的发送频率。以下是如何使用它：

定义一个时间限制（例如，每秒一次）。
跟踪上次发送请求的时间。
如果当前时间与上次发送请求的时间之差小于时间限制，则取消请求。

代码示例：

const throttle = (func, limit) => {
  let lastFuncInvocationTime = 0;
  return function () {
    const context = this;
    const args = arguments;
    const now = Date.now();
    if (now - lastFuncInvocationTime > limit) {
      lastFuncInvocationTime = now;
      func.apply(context, args);
    }
  };
};

// 使用节流来限制请求发送频率
const throttledRequest = throttle(axios.get, 1000);

throttledRequest('https://example.com');

3. 使用防抖

防抖是一种技术，它可以延迟执行一个函数。以下是如何使用它：

定义一个延迟时间（例如，500 毫秒）。
当一个请求被触发时，设置一个定时器，在延迟时间后执行该请求。
如果在延迟时间内再次触发该请求，则取消之前的定时器并设置一个新的定时器。

代码示例：

const debounce = (func, delay) => {
  let timer;
  return function () {
    const context = this;
    const args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
};

// 使用防抖来延迟执行请求
const debouncedRequest = debounce(axios.get, 500);

debouncedRequest('https://example.com');