化解前端暴躁：一招让你的同个接口请求不反复出发

2024-01-06 10:16:10

驾驭接口请求风暴：使用请求节流和防抖

在前端开发中，接口请求是数据获取的生命线。但当这些请求像暴风雨一样涌入时，就会出现所谓的"接口请求风暴"，导致服务器超负荷、用户体验不佳和开发难题。幸运的是，有一种方法可以平息这场风暴：请求节流和防抖。

请求节流：设定节奏

想象一下你在一家拥挤的俱乐部，想点饮料。如果每个人都能在同一时间蜂拥到吧台，场面将十分混乱。同样，如果接口请求在短时间内蜂拥而至，服务器就会不堪重负。请求节流就像一位保镖，控制着请求流量，确保它们不会同时涌入。

在一定的时间间隔内，请求节流只允许一个请求通过。如果在此期间再次触发请求，它将被无情地丢弃。这样，服务器就不会被不必要的请求淹没，从而节省了宝贵的资源。

代码示例：

const THROTTLE_INTERVAL = 1000; // 1秒

const throttle = (func, interval) => {
  let lastCallTime = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastCallTime >= interval) {
      lastCallTime = now;
      func(...args);
    }
  };
};

const throttledRequest = throttle(makeRequest, THROTTLE_INTERVAL);

防抖：把握时机

现在想象一下你正在尝试拍照，但你的手不停地颤抖。照片将会模糊不清，因为相机无法捕捉到你想要的时刻。防抖就像一个稳定器，在恰当的时机按下快门。

防抖允许一个请求在一段时间内只执行一次。如果在该期间再次触发请求，它将取消之前的请求，确保执行的是最新的请求。这样，服务器就不会为不相关的请求浪费时间，而用户也会获得最新、最准确的数据。

代码示例：

const DEBOUNCE_INTERVAL = 1000; // 1秒

const debounce = (func, interval) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func(...args);
    }, interval);
  };
};

const debouncedRequest = debounce(makeRequest, DEBOUNCE_INTERVAL);