AbortController 到底能中断哪些请求？Fetch 和事件它管得了吗？

在Web开发的世界里，请求中断控制一直是提升用户体验的关键技术。当用户切换页面或执行新操作时，未完成的网络请求可能造成资源浪费甚至程序错误。这正是AbortController大显身手的场景——它不仅能够中断Fetch请求，甚至可以控制DOM事件监听器。本文将深入解析这个API的核心能力边界。

这个看似简单的控制器，通过signal信号机制实现了对异步操作的精准控制。其核心作用体现在两个维度：

这是AbortController最广为人知的应用场景。通过将signal对象传递给fetch方法，开发者可以随时终止正在进行的网络请求：

取消正在传输的HTTP请求
避免已失效请求的响应处理
防止重复请求造成的资源竞争

令人惊喜的是，AbortController还能控制DOM事件监听。通过将signal对象绑定到事件监听器，可以实现：

动态移除特定事件监听
批量管理相关事件组
自动化的生命周期管理

文件上传场景中，当用户点击取消按钮时：

const controller = new AbortController();
fetch('/upload', { signal: controller.signal })
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('上传已取消');
    }
  });
// 用户取消操作时
document.getElementById('cancelBtn').onclick = () => controller.abort();

实现可中断的滚动监听：

const controller = new AbortController();

window.addEventListener('scroll', () => {
  console.log('正在滚动');
}, { signal: controller.signal });

// 离开页面时自动解除监听
controller.abort();