如何将Debounce与Abort Controller结合用于Axios请求？

问题场景 #

用户的搜索栏HTML代码：

<div class="d-flex">
    <input class="form-control me-2" type="search" placeholder="Search Products" aria-label="Search" id="searchProduct">
</div>

现有JavaScript实现代码：

const debounce = (fn, delay = 1000) => {
  let timerId = null;
  return (...args) => {
    clearTimeout(timerId);
    timerId = setTimeout(() => fn(...args), delay);
  };
};
let controller = new AbortController();
let signal = controller.signal;

const fetchProducts = (value, signal) => {
  axios
    .get(`/FYP-ECOMMERCE/api/products?search=${value}`, {
      signal, // Pass the AbortSignal to the request
    })
    .then((response) => {
      return response.data;
    })
    .then((data) => {
      console.log(data);
    })
    .catch((error) => {
      if (error.name === "AbortError") {
        // Handle the request abortion (e.g., ignore or log it)
        console.log("Request was aborted");
      } else {
        // Handle other errors
        console.error("An error occurred:", error);
      }
    });
};

const onInput = debounce(fetchProducts, 500);

const searchBar = document.getElementById("searchProduct");

searchBar.addEventListener("input", (e) => {
  const term = e.target.value;
  if (term !== "") {
    controller.abort();
    controller = new AbortController();
    signal = controller.signal;
    onInput(e.target.value, signal);
  }
});

核心问题：当前代码无法正确中止前一次的API请求，需要调整防抖与Abort Controller的结合逻辑。

问题分析 #

现有代码的核心缺陷是：防抖函数延迟执行fetchProducts时，传递的signal已经被提前替换（每次输入都会立刻创建新的Controller），导致前一次发出的请求根本没有绑定到被中止的signal上，自然无法被中止。简单来说，你在输入时立刻中止旧Controller，但此时防抖的请求还没触发，等防抖触发时用的是新Controller的signal，旧请求的中止逻辑完全失效。

正确实现方案 #

将Abort Controller的管理逻辑移入防抖函数内部，让防抖函数自己跟踪当前待执行/已执行的请求对应的Controller，确保每次新输入触发防抖时，先中止上一次的请求（如果存在），再处理新的请求逻辑。

修改后的完整代码：

const debounceWithAbort = (fn, delay = 1000) => {
  let timerId = null;
  let controller = null; // 防抖内部维护Controller实例

  return (...args) => {
    // 1. 中止上一次可能存在的请求
    if (controller) {
      controller.abort();
    }
    // 2. 清除上一次的防抖定时器
    clearTimeout(timerId);
    // 3. 创建新的Controller
    controller = new AbortController();
    // 4. 延迟执行目标函数，传入新的signal
    timerId = setTimeout(() => {
      fn(...args, controller.signal);
      // 请求执行完成后清空controller，避免重复中止
      controller = null;
    }, delay);
  };
};

const fetchProducts = (value, signal) => {
  axios
    .get(`/FYP-ECOMMERCE/api/products?search=${value}`, { signal })
    .then((response) => response.data)
    .then((data) => {
      console.log(data);
      // 这里可以添加渲染搜索结果的逻辑
    })
    .catch((error) => {
      // 忽略中止错误，只处理其他请求异常
      if (error.name !== "AbortError") {
        console.error("请求出错:", error);
      }
    });
};

// 创建带中止能力的防抖搜索函数
const debouncedFetch = debounceWithAbort(fetchProducts, 500);

const searchBar = document.getElementById("searchProduct");

searchBar.addEventListener("input", (e) => {
  const term = e.target.value.trim();
  if (term) {
    debouncedFetch(term);
  } else {
    // 输入为空时，清空结果并中止可能的请求
    if (debouncedFetch.controller) {
      debouncedFetch.controller.abort();
    }
    // 这里可以添加清空搜索结果的逻辑
  }
});

关键改动说明 #

1. 防抖函数内部管理Controller：将Controller的生命周期与防抖定时器绑定，每次触发防抖时，先中止上一次的请求（如果存在），再创建新的Controller，确保每个请求都对应唯一的signal。
2. 简化输入事件逻辑：输入事件只需要传递搜索关键词，所有中止逻辑都由防抖函数处理，避免外部状态混乱。
3. 请求后清空Controller：避免后续不必要的中止操作，同时可以通过判断controller是否存在，区分是否有正在等待或执行的请求。

通过这种方式，能够实现：

• 用户连续输入时，前一次的防抖定时器被清除，已发出的请求会被立刻中止；
• 只有当用户停止输入超过500ms后，才会发送最新的搜索请求，且该请求会被绑定到新的signal上，后续有新输入时可及时中止。

内容的提问来源于stack exchange，提问作者desh