如何在useEffect中串行执行请求或终止无效请求？

你遇到的是典型的请求竞态问题：旧请求（空department）耗时久，后发起的新请求先完成更新了页面，但旧请求完成后又把数据覆盖回去，导致页面显示和过滤器状态不一致。你之前用的async/await只是让单个请求内部异步执行，并没有解决多个请求之间的竞态问题——因为多个请求还是并行发起的。

下面提供两种可行的解决方案：

方案一：使用AbortController终止旧请求 #

现代浏览器和主流请求库（如Axios、Fetch）都支持AbortController，可以在依赖变化时终止上一次未完成的请求，从根源上避免无效请求覆盖数据。

代码示例： #

假设你的getFilteredRestReport封装了请求逻辑，需要支持传入signal参数：

useEffect(() => {
  // 创建终止控制器
  const abortController = new AbortController();
  const { signal } = abortController;

  const fetchData = async () => {
    try {
      const result = await getFilteredRestReport({
        date_start: formatDatePatchPoint(date[0]),
        date_end: formatDatePatchPoint(date[1]),
        department,
        signal // 将signal传入请求
      });
      // 这里处理请求结果（如更新state）
    } catch (error) {
      // 捕获终止错误，无需处理
      if (error.name === 'AbortError') return;
      // 处理其他请求错误
    }
  };

  fetchData();

  // 组件卸载或依赖变化时，终止上一次请求
  return () => abortController.abort();
}, [date, department]);

适配请求库： #

• 如果用Fetch：直接在fetch的options里传入signal即可。
• 如果用Axios：在请求config里添加signal: signal，Axios会自动处理终止逻辑。

方案二：用标志位过滤无效请求结果 #

如果无法修改请求封装逻辑，或者不需要终止请求，可以在组件内用标志位跟踪当前请求是否是最新的，只处理最新请求的结果。

代码示例： #

useEffect(() => {
  let isCurrentRequest = true; // 标志位：标记当前请求是否有效

  const fetchData = async () => {
    const result = await getFilteredRestReport({
      date_start: formatDatePatchPoint(date[0]),
      date_end: formatDatePatchPoint(date[1]),
      department,
    });
    // 只有当前请求是最新的，才更新页面数据
    if (isCurrentRequest) {
      // 处理请求结果（如更新state）
    }
  };

  fetchData();

  // 依赖变化或组件卸载时，标记当前请求无效
  return () => {
    isCurrentRequest = false;
  };
}, [date, department]);

这个方案的核心是：每次依赖变化时，旧请求的标志位会被设为false，即使它后续完成，也不会执行数据更新逻辑。

为什么之前的async/await没用？ #

你写的async/await只是让单个请求的执行流程变成异步，但并没有阻止多个请求同时发起。旧请求和新请求依然是并行执行的，旧请求完成后还是会执行数据更新，所以会覆盖新请求的结果。

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