Fetch 可通过 AbortController 的 signal 实现请求取消：创建 controller 并传入 fetch 选项，调用 controller.abort() 即可中止请求；注意 signal 不可复用，每次请求需新建 controller。
Fetch 可以通过 AbortController 实现请求取消，核心是将控制器的 signal 传入 fetch() 的 options，再在需要时调用 controller.abort()。
创建并传入 signal
先新建一个 AbortController 实例，把它的 signal 属性作为 fetch 的配置项传入：
const controller = new AbortController();
const signal = controller.signal;
fetch('/api/data', { signal })
.then(response => response.json())
.then(data => console.log(data))
.catch(err => {
if (err.name === 'AbortError') {
console.log('请求已被取消');
} else {
console.error('请求失败:', err);
}
});
主动取消请求
任何时候调用 controller.abort()，都会中止关联的 fetch 请求，并触发 catch 中的 AbortError：
// 比如 2 秒后取消
setTimeout(() => controller.abort(), 2000);
// 或者用户点击取消按钮
document.getElementById('cancel-btn').addEventListener('click', () => {
controller.abort();
});
注意信号复用限制
AbortSignal 不能重复使用，每个请求应配一个独立的 AbortController：
立即学习“Java免费学习笔记（深入）”；
- 不要对多个 fetch 复用同一个
signal（除非你确实想同时取消它们） - 不要在
abort()后再次用该signal发起新请求 —— 会立即报AbortError - 重新发起请求时，必须新建
AbortController
与 Promise 封装或 React 等框架结合的小提示
在封装 fetch 工具函数或组件中使用时，建议把 controller 暴露出来，方便外部控制：
function request(url, options = {}) {
const controller = new AbortController();
const signal = controller.signal;
return {
promise: fetch(url, { ...options, signal }).then(r => r.json()),
abort: () => controller.abort()
};
}
// 使用
const req = request('/api/user');
req.promise.then(console.log);
// 取消
req.abort();
