当函数被再次调用时如何终止Axios请求？

要实现新请求发起前终止未完成的请求，你可以利用闭包保存上一次请求的AbortController实例，每次调用函数时先终止之前未完成的请求，再发起新请求。

修改后的代码如下：

import axios from "axios";

const paginatedActivities = (() => {
  let previousController = null;

  return async function(pageNumber) {
    // 终止上一次未完成的请求
    if (previousController) {
      previousController.abort();
      console.log("已终止之前的未完成请求");
    }

    // 创建新的控制器并绑定到当前请求
    const controller = new AbortController();
    previousController = controller;

    try {
      const fetchData = await axios.get(
        `${process.env.SERVERBASEURL}/activities/paginatedactivities`,
        {
          signal: controller.signal,
          params: { query: "query", pageNumber: pageNumber },
          withCredentials: true,
        }
      );

      // 请求成功后清空控制器引用，避免后续误操作
      previousController = null;
      return fetchData.data;
    } catch (err) {
      // 主动取消的请求单独处理，无需抛出错误
      if (axios.isCancel(err)) {
        console.log("请求已取消");
        return null; // 可根据需求返回合适的占位值
      }
      // 其他错误正常抛出或处理
      console.error("请求出错:", err);
      throw err;
    }
  };
})();

export default paginatedActivities;

关键逻辑说明： #

• 用立即执行函数创建闭包，previousController变量会被持久保存，不会在每次函数调用时重置。
• 每次调用paginatedActivities时，先检查是否存在未完成的请求控制器，存在则直接终止。
• 新请求绑定新的控制器，请求完成（成功/非取消错误）后清空控制器引用，避免后续无效的终止操作。

这种方式完全通过函数自身的闭包状态管理请求生命周期，不依赖React的useEffect钩子，适用于任何JavaScript运行环境。

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