JavaScript 中取消 Ajax 请求推荐使用 fetch + AbortController。通过 new AbortController() 创建控制器，将 controller.signal 传入 fetch，调用 controller.abort() 即可中断请求，触发 AbortError；XMLHttpRequest 虽支持 xhr.abort()，但灵活性和现代性不如前者。
在 JavaScript 中，使用 abort() 方法取消已发出的 Ajax 请求，核心是通过 AbortController 实例控制请求生命周期。XMLHttpRequest 也支持 abort()，但现代推荐用 fetch + AbortController，更统一、更易管理。
fetch 配合 AbortController 取消请求
AbortController 提供一个 signal 对象，传给 fetch 的 signal 选项。调用其 abort() 方法即可中断请求。
- 创建控制器：
const controller = new AbortController(); - 发起请求时传入 signal：
fetch(url, { signal: controller.signal }) - 中途取消：
controller.abort()（可随时调用） - 取消后，fetch 会立即 reject，错误类型为
DOMException，name是"AbortError"
实际使用示例
比如用户输入搜索关键词，每次新输入前取消上一次请求：
let controller = null;
function search(query) {
// 先取消之前的请求（如果存在）
if (controller) controller.abort();
controller = new AbortController();
fetch(`/api/search?q=${query}`, {
signal: controller.signal
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => {
if (err.name === 'AbortError') {
console.log('请求已被取消');
} else {
console.error('请求失败', err);
}
});
}
// 比如在输入框输入时调用
document.getElementById('searchInput').addEventListener('input', e => {
search(e.target.value);
});
XMLHttpRequest 的 abort() 方法
XHR 原生支持 .abort()，调用后触发 onabort 回调，且状态变为 0：
立即学习“Java免费学习笔记（深入）”；
- 保存 XHR 实例引用，便于后续调用
xhr.abort() - 注意：abort 后不能再复用该实例，需新建
- 兼容性好，但不如 fetch + AbortController 灵活（比如不支持超时自动 abort）
注意事项和常见坑
取消请求不是万能的 —— 它只影响客户端行为：
- 服务端可能仍在处理，不会因 client abort 而自动停止（除非后端主动监听连接断开）
- 重复创建 controller 但忘记 abort，可能导致内存泄漏或意外请求残留
- 多个并发请求需分别管理各自的 controller，避免误 abort 其他请求
- Vue/React 中建议在组件卸载（
useEffect cleanup或beforeUnmount）时主动 abort
