前端搜索竞态治理实战：用 AbortController 取消过期请求

搜索框、联想词、表格筛选、远程下拉选择，这些前端功能都有一个共同特点：用户输入很快，接口返回不一定按发起顺序回来。如果不处理请求竞态，旧请求可能比新请求更晚返回，最后把页面结果覆盖成过期数据。

本文用一个搜索框案例，演示如何使用 AbortController 取消过期 fetch 请求，再配合防抖、状态机和错误处理，让搜索结果始终和当前输入保持一致。

摘要

请求竞态的根源不是接口慢，而是“多个异步请求同时存在，且旧请求仍有机会更新 UI”。解决思路是：每次发起新搜索前取消上一次请求，只允许最新请求写入结果；同时把取消异常和真实错误分开处理，避免控制台和错误提示被无意义的取消请求污染。

适合人群

适合正在写前端搜索、筛选、自动补全、管理后台表格查询的开发者。示例使用原生 JavaScript，React、Vue、Svelte 或普通页面都可以套用。

目录

1. 先复现搜索结果错乱问题
2. AbortController 的核心用法
3. 封装一个可复用的搜索函数
4. 加入防抖和状态管理
5. React/Vue 中怎么落地
6. 常见坑与排查方式

一、先复现搜索结果错乱问题

假设用户依次输入 r、re、redis。前两个请求可能因为缓存、网络或服务端处理时间不同，返回顺序变成：

• /api/search?q=redis 先返回，页面展示了正确结果；
• /api/search?q=re 后返回，又把结果覆盖成旧关键字；
• 用户看到的列表和输入框内容不一致。

这类问题在开发环境不一定稳定复现，但线上用户网络复杂，出现概率并不低。前端不能假设“最后发出的请求一定最后返回”。

二、AbortController 的核心用法

AbortController 是浏览器提供的请求取消控制器。创建控制器后，把 controller.signal 传给 fetch，需要取消时调用 controller.abort()。

let controller = null;

async function search(keyword) {
  if (controller) {
    controller.abort();
  }

  controller = new AbortController();
  const { signal } = controller;

  try {
    const response = await fetch(`/api/search?q=${encodeURIComponent(keyword)}`, {
      signal,
    });
    const data = await response.json();
    renderResults(data);
  } catch (err) {
    if (err.name === 'AbortError') {
      return;
    }
    showError(err.message || '搜索失败');
  }
}

这段代码的关键点有两个：发起新请求前先取消旧请求；捕获异常时忽略 AbortError，因为取消请求是预期行为，不应该弹错误提示。

三、封装一个可复用的搜索函数

真实项目里不建议把控制器散落在每个事件回调中。可以把“取消旧请求、发起新请求、只更新最新结果”封装成一个工厂函数：

function createCancelableSearch(requester) {
  let controller = null;
  let requestId = 0;

  return async function run(keyword) {
    requestId += 1;
    const currentId = requestId;

    if (controller) {
      controller.abort();
    }

    controller = new AbortController();

    try {
      const data = await requester(keyword, controller.signal);
      if (currentId !== requestId) {
        return { status: 'stale' };
      }
      return { status: 'success', data };
    } catch (err) {
      if (err.name === 'AbortError') {
        return { status: 'aborted' };
      }
      return { status: 'error', error: err };
    }
  };
}

const search = createCancelableSearch(async (keyword, signal) => {
  const response = await fetch(`/api/search?q=${encodeURIComponent(keyword)}`, {
    signal,
  });
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }
  return response.json();
});

这里额外加了 requestId。它不是替代 AbortController，而是兜底：如果某些请求已经进入不可取消阶段，或者项目里存在非 fetch 的异步逻辑，旧结果仍然不能写入 UI。

四、加入防抖和状态管理

只取消请求还不够。用户每输入一个字符就立刻请求，服务端压力仍然很高。搜索框通常需要 200 到 400 毫秒防抖：用户停止输入一小段时间后再发请求。

function debounce(fn, delay = 300) {
  let timer = null;
  return (...args) => {
    window.clearTimeout(timer);
    timer = window.setTimeout(() => fn(...args), delay);
  };
}

const state = {
  keyword: '',
  loading: false,
  results: [],
  error: '',
};

const handleInput = debounce(async (keyword) => {
  state.keyword = keyword.trim();
  state.error = '';

  if (!state.keyword) {
    state.results = [];
    state.loading = false;
    render(state);
    return;
  }

  state.loading = true;
  render(state);

  const result = await search(state.keyword);

  if (result.status === 'success') {
    state.results = result.data.items || [];
    state.loading = false;
  }

  if (result.status === 'error') {
    state.error = result.error.message || '搜索失败';
    state.loading = false;
  }

  if (result.status === 'aborted' || result.status === 'stale') {
    return;
  }

  render(state);
}, 300);

状态最好显式区分：空闲、等待防抖、请求中、已取消、成功、失败。这样组件不会在取消请求时误清空列表，也不会把取消当成错误展示给用户。

五、React/Vue 中怎么落地

在 React 中，控制器可以放进 useRef，组件卸载时记得取消请求：

function useSearchApi() {
  const controllerRef = React.useRef(null);

  React.useEffect(() => {
    return () => {
      controllerRef.current?.abort();
    };
  }, []);

  return async function search(keyword) {
    controllerRef.current?.abort();
    controllerRef.current = new AbortController();

    const res = await fetch(`/api/search?q=${encodeURIComponent(keyword)}`, {
      signal: controllerRef.current.signal,
    });
    return res.json();
  };
}

在 Vue 中，可以把控制器放在组合式函数内部，并在 onBeforeUnmount 时取消：

import { onBeforeUnmount } from 'vue';

export function useCancelableSearch() {
  let controller = null;

  onBeforeUnmount(() => {
    controller?.abort();
  });

  const search = async (keyword) => {
    controller?.abort();
    controller = new AbortController();

    const res = await fetch(`/api/search?q=${encodeURIComponent(keyword)}`, {
      signal: controller.signal,
    });
    return res.json();
  };

  return { search };
}

六、常见坑与排查方式

1. 把 AbortError 当成接口报错

取消请求是正常控制流，不是业务失败。错误上报、Toast、日志告警里都应该过滤 AbortError，否则用户输入一次搜索词就可能产生多条“失败日志”。

2. 只做防抖，不取消请求

防抖只能减少请求数量，不能保证返回顺序。用户慢速输入、网络抖动或接口耗时不稳定时，旧请求仍然可能覆盖新结果。

3. 组件卸载后继续 setState

页面切换、弹窗关闭、路由跳转时，要取消正在进行的请求。否则请求返回后继续更新已销毁组件，轻则控制台报警，重则造成状态错乱。

4. 忽略非 fetch 异步逻辑

AbortController 主要控制 fetch 这类支持 signal 的 API。对于本地计算、第三方 SDK、旧版 AJAX 封装，要用 requestId 或任务版本号阻止旧结果写入 UI。

七、总结

前端搜索竞态治理的重点是“只允许最新意图更新页面”。实战中可以采用三层处理：先用防抖减少请求，再用 AbortController 取消过期请求，最后用 requestId 兜底阻止旧结果渲染。这样搜索框、远程下拉、筛选面板和管理后台列表都会稳定很多。