JavaScript 怎么在单页应用切换路由时自动取消未完成的请求-js教程-PHP中文网

使用AbortController可主动取消SPA中路由切换时的残留异步请求，避免资源浪费和状态错乱；需在组件卸载或路由守卫中调用controller.abort()，并捕获AbortError。

javascript 怎么在单页应用切换路由时自动取消未完成的请求

在单页应用（SPA）中，用户快速切换路由时，前一个页面发起的异步请求（如 fetch 或 axios）可能仍在进行。若不主动取消，这些“残留请求”不仅浪费带宽和资源，还可能导致状态错乱（例如旧请求返回后更新了新页面的 UI）。现代 JavaScript 提供了标准且可靠的方案来解决这个问题：使用 AbortController 配合路由生命周期管理。

用 AbortController 主动中断请求

AbortController 是浏览器原生 API，可为 fetch、XMLHttpRequest（需手动适配）等提供中止信号。核心逻辑是：每个请求绑定一个独立的 AbortSignal，当路由即将离开时调用 controller.abort()。

创建 controller 实例，并将 signal 传入 fetch 选项
在组件卸载或路由守卫（如 beforeRouteLeave、useEffect cleanup）中调用 abort()
被中止的请求会立即抛出 AbortError，需捕获避免未处理异常

示例（React + useEffect）：

useEffect(() => {
  const controller = new AbortController();

  fetch('/api/data', { signal: controller.signal })
    .then(res => res.json())
    .then(data => setData(data))
    .catch(err => {
      if (err.name === 'AbortError') return; // 忽略中止错误
      console.error('请求失败:', err);
    });

  return () => controller.abort(); // 组件卸载时取消
}, []);

在 Vue Router 中结合路由守卫统一管理

Vue 3 的 onBeforeRouteLeave 或 beforeRouteLeave（Options API）是理想的取消时机。把 controller 存在组件实例或 ref 中，离开前统一 abort。

避免在 setup 中直接写异步请求，改用 onMounted 启动并保存 controller
多个请求可共用一个 controller（abort 后所有关联请求都会终止），也可按需创建多个
注意：router.push 触发后，当前组件不会立刻销毁，因此必须在守卫中提前取消，而非依赖 onUnmounted

Axios 用户请用 CancelToken（旧版）或 AbortController（v0.27.2+）

Axios 自 v0.27.2 起已原生支持 AbortSignal，推荐直接使用：

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

传入 { signal: controller.signal } 即可，无需额外配置
旧版本可用 CancelToken.source()，但已废弃，不建议新项目使用
全局请求拦截器中无法自动注入 signal，需在业务层显式传递

示例（Axios）：

const controller = new AbortController();
axios.get('/api/list', { signal: controller.signal })
  .then(...)
  .catch(err => {
    if (axios.isCancel(err)) return;
    // 处理其他错误
  });

// 路由离开时
controller.abort();