AbortController 是现代 JavaScript 中取消重复请求的标准方案，通过每次发起新请求前调用 abort() 中止旧请求，配合 fetch、Axios 或 React 的 useEffect 实现高效资源管理与体验优化。
在用户重复触发请求（比如搜索框输入、下拉刷新、分页点击）时，取消上一次未完成的请求，是提升体验和节省资源的关键做法。核心思路是：**每次发起新请求前，主动中止前一个正在进行的请求**。现代 JavaScript 主要通过 AbortController 实现，它提供标准、简洁、原生的支持。
用 AbortController 管理单个请求生命周期
AbortController 是浏览器原生 API，配合 fetch 使用最直接。它的 signal 可传给 fetch，调用 abort() 即可中断请求。
- 声明一个变量（如
let controller = null）保存上一次的控制器实例 - 每次发请求前，先检查是否存在旧的
controller，有则调用controller.abort() - 新建
new AbortController()，更新变量，并把signal传入fetch
示例（搜索框输入防抖场景）：
let controller = null;
function search(query) {
// 取消上一次请求
if (controller) controller.abort();
// 创建新控制器
controller = new AbortController();
fetch('/api/search', {
method: 'GET',
signal: controller.signal, // 绑定中断信号
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => {
if (err.name === 'AbortError') {
console.log('请求已被取消');
} else {
console.error('请求失败:', err);
}
});
}
// 输入框监听（配合防抖更佳）
input.addEventListener('input', () => search(input.value));
封装成可复用的请求函数
避免每次手动管理 controller，可封装一个带自动取消能力的请求函数，接受唯一标识（如 key）来区分不同请求流。
立即学习“Java免费学习笔记（深入）”；
- 用 Map 存储各 key 对应的 controller，便于按需取消
- 发起请求时，先 abort 同 key 的旧请求，再存入新 controller
- 支持清除指定 key 或全部 controller（例如组件卸载时）
简单封装示意：
const pendingControllers = new Map();
function smartFetch(key, url, options = {}) {
// 取消同 key 的旧请求
if (pendingControllers.has(key)) {
pendingControllers.get(key).abort();
}
const controller = new AbortController();
pendingControllers.set(key, controller);
return fetch(url, {
...options,
signal: controller.signal,
}).finally(() => pendingControllers.delete(key));
}
// 使用
smartFetch('search', '/api/search?q=' + query)
.then(r => r.json())
.then(console.log);
React 中结合 useEffect 和 useRef 安全取消
在 React 函数组件中，需注意请求可能在组件卸载后返回，导致 setState 报错。AbortController 天然适配此场景，但还需配合 useRef 避免闭包中引用过期的 state 或 props。
- 用
useRef存储 controller，确保每次都能访问最新实例 - 在
useEffect清理函数中调用abort()，覆盖组件卸载或依赖变更场景 - 不依赖闭包中的 query 值，改用 ref 或重新捕获（如使用函数式更新或 useCallback 包裹请求逻辑）
常见写法：
function SearchResults({ query }) {
const controllerRef = useRef(null);
useEffect(() => {
// 清理上一次请求
if (controllerRef.current) {
controllerRef.current.abort();
}
const controller = new AbortController();
controllerRef.current = controller;
fetch(`/api/search?q=${query}`, { signal: controller.signal })
.then(r => r.json())
.then(setData)
.catch(err => {
if (err.name !== 'AbortError') console.error(err);
});
// 组件卸载或 query 变化时自动清理
return () => controller.abort();
}, [query]);
// ...
}
注意 Axios 用户：用 CancelToken 已废弃，改用 AbortController
Axios 0.22+ 版本已原生支持 AbortSignal，推荐直接使用，不再需要 CancelToken（已弃用且不兼容 Promise 取消语义）。
- 正确方式：
axios.get(url, { signal: controller.signal }) - 错误方式：继续用
CancelToken.source()—— 不仅过时，还可能引发内存泄漏或取消失效 - 若暂无法升级 Axios，至少确保每次
source.cancel()调用及时，且 source 实例不被意外保留
一句话总结：无论是否用框架，AbortController 是当前最标准、最可靠、最轻量的请求取消方案，用户重复触发时只需“先 abort，再 fetch”，逻辑清晰，无额外依赖。
