JS 中页面切换时怎么用 AbortController 清理未完成的搜索请求-js教程-PHP中文网

使用 AbortController 清理未完成搜索请求，需在组件卸载或路由跳转前调用 abort()；React 在 useEffect 清理函数中、Vue3 在 onBeforeUnmount 中、原生 JS 监听 beforeunload 或路由事件；每次请求新建 controller 并传 signal，防抖时需同步取消；捕获并忽略 AbortError。

js 中页面切换时怎么用 abortcontroller 清理未完成的搜索请求

页面切换时用 AbortController 清理未完成的搜索请求，核心是：在组件卸载或路由跳转前调用 controller.abort()，让正在发起的 fetch 请求主动中止，避免内存泄漏、状态错乱或无效渲染。

监听页面离开或组件卸载时机

不同场景下触发清理的时机不同：

React 函数组件：在 useEffect 的清理函数中调用 abort()
Vue 3（Composition API）：在 onBeforeUnmount 或 onScopeDispose 中调用
原生 JS 单页应用：监听 beforeunload 或路由变化事件（如 popstate、hashchange），或在手动跳转前显式 abort

为每次搜索请求创建独立的 AbortController

不能复用同一个 AbortController 实例处理多个请求，否则一次 abort 会中断所有关联请求。应确保：

每次调用搜索函数（如用户输入后 debounce 触发）都新建 new AbortController()
将 controller.signal 传入 fetch 的 options 中
保存当前 controller 引用（例如用 ref），以便后续清理

示例（React）：

jm-jsjkxyjs02-zlm-405

使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。

下载

const searchRef = useRef(null);

const doSearch = async (query) => {
  // 清掉上一次未完成的请求
  if (searchRef.current) searchRef.current.abort();
  
  const controller = new AbortController();
  searchRef.current = controller;

  try {
    const res = await fetch(`/api/search?q=${query}`, {
      signal: controller.signal
    });
    const data = await res.json();
    // 更新状态...
  } catch (err) {
    if (err.name === 'AbortError') return; // 忽略中止错误
    console.error('搜索失败:', err);
  }
};