在现代前端开发中，请求取消是一个非常常见的问题： * 用户快速输入搜索关键词，旧请求已经没有意义； * 用户离开页面，页面相关请求不应该继续占用客户端资源； * 用户快速切换路由，需要取消上一页面的请求； * 用户重复点击按钮，需要避免相同请求同时执行； * 接口响应时间过长，需要主动终止请求； * AI 流式输出过程中，用户点击“停止生成”。这些场景都可以通过 `AbortController` 统一解决。 `AbortController` 最初主要用于 `fetch` 请求，现在 Axios 也支持通过 `signal` 使用它。 --- # 一、什么是 AbortController？ `AbortController` 是 Web API 提供的一个**异步任务取消机制**。它主要包含两个对象： ```ts const controller = new AbortController(); controller.signal; controller.abort(); ``` 其中： | API | 作用 | | -------------------- | -------- | | `AbortController` | 控制器 | | `controller.signal` | 取消信号 | | `controller.abort()` | 发出取消信号 | | `signal.aborted` | 判断是否已经取消 | | `signal.reason` | 获取取消原因 | 最简单的例子： ```ts const controller = new AbortController(); fetch("/api/user", { signal: controller.signal, }); // 取消请求 controller.abort(); ``` 调用： ```ts controller.abort(); ``` 之后，使用这个 `signal` 的异步任务就会收到取消信号。 --- # 二、AbortController 的工作原理可以把 `AbortController` 理解成一个“取消广播器”。 ```text AbortController │ controller.abort() │ ▼ AbortSignal │ ┌────────────┼────────────┐ ▼ ▼ ▼ fetch Axios 自定义任务 │ │ │ ▼ ▼ ▼ 取消请求取消请求停止任务 ``` 例如： ```ts const controller = new AbortController(); const signal = controller.signal; signal.addEventListener("abort", () => { console.log("任务收到取消信号"); }); controller.abort(); ``` 执行： ```text 任务收到取消信号 ``` 所以 `AbortController` 本身并不是“强制杀死任务”。它更准确的模型是： ```text Controller │ │ abort() ▼ Signal │ │ 通知 ▼ 异步任务 │ └── 根据 signal 停止自己的工作 ``` --- # 三、AbortController 能取消什么？最常见的是： ```text fetch Axios ``` 但它并不局限于 HTTP 请求。只要一个异步任务支持 `AbortSignal`，就可以实现取消。例如： ```ts function sleep( ms: number, signal: AbortSignal ) { return new Promise((resolve, reject) => { const timer = setTimeout(resolve, ms); signal.addEventListener("abort", () => { clearTimeout(timer); reject(new Error("任务被取消")); }); }); } ``` 使用： ```ts const controller = new AbortController(); sleep(5000, controller.signal); setTimeout(() => { controller.abort(); }, 1000); ``` 1 秒后： ```text 任务被取消 ``` 因此可以把 `AbortSignal` 看成一种通用的： > **异步任务取消协议** --- # 四、Fetch 中使用 AbortController 最基本的 Fetch 用法： ```ts const controller = new AbortController(); async function getUser() { try { const response = await fetch("/api/user", { signal: controller.signal, }); const data = await response.json(); console.log(data); } catch (error: any) { if (error.name === "AbortError") { console.log("请求被取消"); return; } console.error(error); } } getUser(); // 取消请求 controller.abort(); ``` --- # 五、Axios 中使用 AbortController Axios 推荐使用： ```ts signal ``` 而不是旧的： ```ts CancelToken ``` 基本代码： ```ts import axios from "axios"; const controller = new AbortController(); axios.get("/api/user", { signal: controller.signal, }); // 取消请求 controller.abort(); ``` 如果请求被取消： ```ts try { await axios.get("/api/user", { signal: controller.signal, }); } catch (error) { if (axios.isCancel(error)) { console.log("请求被取消"); } } ``` --- # 六、案例一：组件级取消 ## 6.1 为什么需要组件级取消？假设用户进入： ```text UserPage ``` 页面加载： ```text GET /api/user ``` 但是用户在请求完成之前离开： ```text UserPage ↓ OtherPage ``` 此时： ```text UserPage ``` 已经不存在了。如果请求仍然继续，就可能造成： ```text 无意义的网络请求 + 无意义的数据处理 + 状态更新 ``` 因此可以在组件卸载时取消请求。 --- ## 6.2 React 实现 ```tsx import { useEffect, useState } from "react"; import axios from "axios"; interface User { id: number; name: string; } export default function UserPage() { const [user, setUser] = useState(null); useEffect(() => { const controller = new AbortController(); async function fetchUser() { try { const response = await axios.get( "/api/user", { signal: controller.signal, } ); setUser(response.data); } catch (error) { if (axios.isCancel(error)) { console.log("用户请求被取消"); return; } console.error(error); } } fetchUser(); return () => { controller.abort(); }; }, []); return (

{user?.name}

); } ``` --- ## 6.3 执行过程 ```text 组件挂载 ↓ 创建 AbortController ↓ 发送 Axios 请求 ↓ 用户离开页面 ↓ useEffect cleanup ↓ controller.abort() ↓ Axios 请求取消 ``` 核心代码就是： ```ts return () => { controller.abort(); }; ``` React 的 `useEffect` 清理函数非常适合处理这种场景。 --- # 七、案例二：路由级取消组件级取消解决的是： > 一个组件自己的请求。但是实际业务页面通常有多个请求。例如订单页面： ```text OrderPage │ ├── /api/orders ├── /api/order/stat ├── /api/order/products └── /api/order/users ``` 这些请求都属于： ```text OrderPage ``` 如果用户切换到： ```text UserPage ``` 我们希望： ```text 取消 OrderPage 的所有请求 ``` --- ## 7.1 共享一个 Controller ```ts const controller = new AbortController(); axios.get("/api/orders", { signal: controller.signal, }); axios.get("/api/order/stat", { signal: controller.signal, }); axios.get("/api/order/products", { signal: controller.signal, }); ``` 当： ```ts controller.abort(); ``` 执行之后： ```text orders ──┐ order/stat ─┼──> 全部取消 products ──┘ ``` --- ## 7.2 封装页面 Controller ```ts let pageController: AbortController | null = null; export function createPageController() { // 如果上一页面还存在请求，先取消 pageController?.abort(); pageController = new AbortController(); return pageController; } export function abortPageRequests() { pageController?.abort(); pageController = null; } ``` --- ## 7.3 页面使用 ```tsx import { useEffect } from "react"; import axios from "axios"; import { createPageController, abortPageRequests, } from "./pageAbort"; export default function OrderPage() { useEffect(() => { const controller = createPageController(); axios.get("/api/orders", { signal: controller.signal, }); axios.get("/api/order/stat", { signal: controller.signal, }); axios.get("/api/order/products", { signal: controller.signal, }); return () => { abortPageRequests(); }; }, []); return

订单页面

; } ``` 这样： ```text 进入订单页 ↓ 创建 PageController ↓ 多个接口共享 signal ↓ 离开订单页 ↓ controller.abort() ↓ 所有订单接口取消 ``` --- # 八、案例三：搜索框取消旧请求这是 `AbortController` 最经典的应用场景之一。假设用户输入： ```text a ab abc ``` 分别发送： ```text 请求 A：search=a 请求 B：search=ab 请求 C：search=abc ``` 如果网络情况： ```text C 先返回 A 后返回 B 最后返回 ``` 就可能出现： ```text 页面最终显示： ab ``` 而用户实际上搜索的是： ```text abc ``` 这就是典型的： > **请求竞态问题（Race Condition）** --- # 九、使用 AbortController 解决搜索竞态可以保存当前请求的 Controller： ```tsx import { useRef } from "react"; import axios from "axios"; export default function Search() { const controllerRef = useRef(null); async function handleSearch(keyword: string) { // 取消上一个请求 controllerRef.current?.abort(); // 创建新的 Controller const controller = new AbortController(); controllerRef.current = controller; try { const response = await axios.get( "/api/search", { params: { keyword, }, signal: controller.signal, } ); console.log(response.data); } catch (error) { if (axios.isCancel(error)) { console.log("旧搜索请求被取消"); return; } console.error(error); } } return ( { handleSearch(event.target.value); }} /> ); } ``` --- # 十、AbortController + 防抖需要注意： > **防抖和 AbortController 解决的是两个不同的问题。** 防抖： ```text 减少请求次数 ``` AbortController： ```text 取消已经发出的旧请求 ``` 实际项目中通常组合使用。 ```tsx import { useRef } from "react"; import axios from "axios"; export default function Search() { const timerRef = useRef(null); const controllerRef = useRef(null); function handleSearch(keyword: string) { // 清除防抖定时器 if (timerRef.current) { clearTimeout(timerRef.current); } // 取消已经发送的旧请求 controllerRef.current?.abort(); timerRef.current = window.setTimeout( async () => { const controller = new AbortController(); controllerRef.current = controller; try { const response = await axios.get( "/api/search", { params: { keyword, }, signal: controller.signal, } ); console.log(response.data); } catch (error) { if (axios.isCancel(error)) { return; } console.error(error); } }, 300 ); } return ( { handleSearch(event.target.value); }} /> ); } ``` 这里形成了： ```text 用户输入 ↓ 300ms 防抖 ↓ 发送请求 ↓ 用户继续输入 ↓ 取消旧请求 ↓ 等待新的 300ms ↓ 发送新请求 ``` --- # 十一、案例四：Axios 拦截器防重复请求实际项目中，经常需要处理： ```text GET /api/user GET /api/user GET /api/user ``` 或者： ```text 用户连续点击按钮 ↓ POST /api/order POST /api/order POST /api/order ``` 可以通过： ```ts Map ``` 维护正在执行的请求。 --- # 十二、设计请求管理 Map ```ts const pendingRequests = new Map(); ``` 结构： ```text Map GET-/api/user ↓ AbortController POST-/api/order ↓ AbortController ``` --- # 十三、生成请求唯一 Key 最简单的方式： ```ts function getRequestKey(config: any) { return `${config.method}-${config.url}`; } ``` 但是生产环境建议把： ```text method url params data ``` 一起考虑。例如： ```ts function getRequestKey(config: any) { return [ config.method, config.url, JSON.stringify(config.params ?? {}), JSON.stringify(config.data ?? {}), ].join("&"); } ``` 这样： ```text GET /user?id=1 ``` 和： ```text GET /user?id=2 ``` 不会被认为是同一个请求。 --- # 十四、Axios 请求拦截器 ```ts import axios from "axios"; const request = axios.create({ baseURL: "/api", }); const pendingRequests = new Map(); function getRequestKey(config: any) { return [ config.method, config.url, JSON.stringify(config.params ?? {}), JSON.stringify(config.data ?? {}), ].join("&"); } request.interceptors.request.use((config) => { const key = getRequestKey(config); // 如果已经存在相同请求 if (pendingRequests.has(key)) { pendingRequests .get(key) ?.abort(); } // 创建新的 Controller const controller = new AbortController(); config.signal = controller.signal; pendingRequests.set( key, controller ); return config; }); ``` --- # 十五、响应拦截器清理 Map 请求成功： ```ts request.interceptors.response.use( (response) => { const key = getRequestKey(response.config); pendingRequests.delete(key); return response; }, (error) => { if (error.config) { const key = getRequestKey(error.config); pendingRequests.delete(key); } return Promise.reject(error); } ); ``` 完整流程： ```text 请求 A ↓ 生成 Key ↓ Map 中不存在 ↓ 创建 Controller ↓ 发送请求 ↓ Map 保存 Controller 请求 B ↓ 生成相同 Key ↓ Map 已存在 ↓ abort 请求 A ↓ 创建 Controller B ↓ 发送请求 B ``` --- # 十六、一个重要问题：这个方案不等于“防止重复业务操作” 例如： ```text POST /api/order ``` 第一次请求可能已经到达服务器： ```text 客户端 │ ├──── POST /order ────► 服务端 │ │ abort() ``` 此时： ```text 客户端：请求取消服务端：可能已经创建订单 ``` 所以： > `AbortController` 解决的是客户端请求生命周期管理，不是服务端业务幂等问题。对于支付、订单创建、扣库存等操作，还需要： ```text 幂等 Key + 服务端幂等控制 ``` 例如： ```http POST /api/order Idempotency-Key: 8f7a9c... ``` 服务端保证同一个 Idempotency-Key 只能成功处理一次。 --- # 十七、案例五：AbortSignal.timeout() 统一超时现代浏览器支持： ```ts AbortSignal.timeout() ``` 例如： ```ts axios.get("/api/data", { signal: AbortSignal.timeout(5000), }); ``` 含义： ```text 请求开始 ↓ 5 秒 ↓ 自动触发 abort ↓ 请求取消 ``` --- # 十八、为什么使用 AbortSignal.timeout？传统方式可能这样： ```ts const controller = new AbortController(); const timer = setTimeout(() => { controller.abort(); }, 5000); axios.get("/api/data", { signal: controller.signal, }); ``` 现在可以直接： ```ts axios.get("/api/data", { signal: AbortSignal.timeout(5000), }); ``` 代码更加简洁。 --- # 十九、Axios 统一超时可以在 Axios 请求拦截器中设置默认超时时间： ```ts import axios from "axios"; const request = axios.create({ baseURL: "/api", }); request.interceptors.request.use( (config) => { if (!config.signal) { config.signal = AbortSignal.timeout(10000); } return config; } ); export default request; ``` 这样： ```ts request.get("/user"); ``` 默认： ```text 10 秒超时 ``` --- # 二十、特殊接口覆盖默认超时例如普通 API： ```text 10 秒 ``` 但是报表接口需要： ```text 30 秒 ``` 可以： ```ts request.get("/report", { signal: AbortSignal.timeout(30000), }); ``` 最终： ```text 普通接口 ↓ 10 秒报表接口 ↓ 30 秒 ``` --- # 二十一、AbortSignal.timeout 与 Axios timeout 的区别 Axios 本身也提供： ```ts axios.get("/api", { timeout: 5000, }); ``` 两者不要简单理解成完全一样。 `timeout` 主要是 Axios 自己的超时机制，而： ```ts signal: AbortSignal.timeout(5000) ``` 是基于标准 `AbortSignal` 的取消机制。如果项目需要统一使用： ```text fetch Axios 自定义异步任务 ``` 那么 `AbortSignal` 的抽象更加统一。 --- # 二十二、AbortController 与服务端取消这是理解 `AbortController` 时非常重要的一点。调用： ```ts controller.abort(); ``` 并不意味着： ```text 服务端业务逻辑一定停止 ``` 例如： ```text 浏览器 │ │ POST /api/export ▼ 服务端 │ ├── 查询数据库 ├── 生成 Excel ├── 处理 100 万条数据 │ ▼ 浏览器 abort() ``` 浏览器： ```text 停止等待响应 ``` 但服务端： ```text 可能继续生成 Excel ``` 所以： > AbortController 主要解决客户端侧的取消问题。如果真正需要取消服务端任务，需要建立： ```text 客户端取消 ↓ 通知服务端 ↓ 服务端取消 Job ↓ 释放计算资源 ``` 例如： ```text POST /api/task ↓ 返回 taskId ↓ 前端执行任务 ↓ 用户点击取消 ↓ POST /api/task/:taskId/cancel ↓ 服务端取消任务 ``` 对于 AI Agent、视频转码、大文件处理、报表生成等长任务，这种设计更加重要。 --- # 二十三、AbortController 的其他应用除了 HTTP 请求，还可以用于： ## 1. 文件上传 ```ts const controller = new AbortController(); axios.post("/upload", file, { signal: controller.signal, }); // 用户点击取消上传 controller.abort(); ``` --- ## 2. AI 流式输出例如： ```text 用户：解释 React Fiber AI： React Fiber 是... ↓ 用户点击停止 ↓ controller.abort() ``` 前端： ```ts const controller = new AbortController(); fetch("/api/chat", { method: "POST", body: JSON.stringify({ message: "解释 React Fiber", }), signal: controller.signal, }); // 停止 AI 输出 function stopGenerate() { controller.abort(); } ``` 如果后端也支持请求断开检测，那么还可以进一步取消服务端正在进行的生成任务。 --- ## 3. 大文件下载 ```ts const controller = new AbortController(); fetch("/large-file.zip", { signal: controller.signal, }); function cancelDownload() { controller.abort(); } ``` --- # 二十四、五种企业场景总结 | 场景 | 解决的问题 | 核心代码 | | --------- | ------------- | ----------------------------- | | 组件级取消 | 组件卸载后请求仍在执行 | `useEffect cleanup → abort()` | | 路由级取消 | 页面切换后整页请求仍在执行 | 多个请求共享 `signal` | | 搜索取消 | 旧搜索请求覆盖新结果 | 新请求前 `abort()` | | Axios 防重复 | 相同请求重复发送 | `Map` | | 统一超时 | 请求长时间没有响应 | `AbortSignal.timeout()` | --- # 二十五、最佳实践实际项目中可以形成这样的请求架构： ```text Axios │ ▼ Request Interceptor │ ┌───────────┼───────────┐ │ │ │ 超时控制重复请求控制全局配置 │ │ ▼ ▼ AbortSignal Map │ ▼ HTTP 请求 │ ┌─────────────┼─────────────┐ │ │ │ 页面级组件级搜索级 Controller Controller Controller ``` 最终形成一个统一的取消体系： ```text AbortController │ ┌────────────────┼────────────────┐ │ │ │ 生命周期请求管理超时管理 │ │ │ ┌────┴────┐ ┌────┴────┐ │ │ │ │ │ │ 组件级路由级搜索取消防重复 │ │ │ │ │ │ └─────────┴──────┴─────────┴──────────┘ │ ▼ AbortSignal ``` --- # 二十七、最终记忆模型只需要记住下面这套模型： ```ts const controller = new AbortController(); doSomething({ signal: controller.signal, }); // 取消 controller.abort(); ``` 然后根据业务场景决定： ```text 组件销毁 ↓ abort() 路由切换 ↓ abort() 搜索新关键词 ↓ abort(旧请求) 发现重复请求 ↓ abort(旧请求) 超过时间 ↓ AbortSignal.timeout() 用户停止 AI ↓ abort() ``` 因此，`AbortController` 可以理解为现代前端中的一个**通用异步取消机制**，而不是单纯的“Axios 取消请求 API”。

AbortController 完全指南