AbortController API 完整梳理

一、代码示例

示例 1：手动取消 fetch 请求

// 创建控制器
const controller = new AbortController();
const signal = controller.signal;

// 发起请求并绑定中断信号
fetch('/api/data', { signal })
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => {
    // 区分手动取消与其他网络错误
    if (err.name === 'AbortError') {
      console.log('请求已手动取消');
    } else {
      console.log('其他网络错误', err);
    }
  });

// 任意时机执行即可终止请求（切换页面、取消按钮点击等场景）
controller.abort('用户主动取消');

示例 2：超时自动中断（极简写法）

无需手动创建控制器，内置超时逻辑：

// 3秒无响应自动中断请求
fetch('/api/list', {
  signal: AbortSignal.timeout(3000)
}).catch(err => {
  if (err.name === 'TimeoutError') {
    console.log('请求超时');
  }
});

示例 3：批量取消 DOM 事件监听

解决页面销毁后事件残留导致的内存泄漏，无需手动执行 removeEventListener：

const controller = new AbortController();
const signal = controller.signal;

function handleScroll() {
  console.log(window.scrollY);
}

window.addEventListener('scroll', handleScroll, { signal });

// 组件/页面卸载时统一取消所有绑定该signal的监听
controller.abort();

示例 4：封装可中断自定义 Promise（延时任务）

适配自定义异步任务，绑定中断信号：

function delay(ms, signal) {
  return new Promise((resolve, reject) => {
    const timer = setTimeout(resolve, ms);
    // 监听中断信号
    signal.addEventListener('abort', () => {
      clearTimeout(timer);
      reject(new Error('任务被中断'));
    });
  });
}

// 使用方式
const ctrl = new AbortController();
delay(5000, ctrl.signal).catch(e => console.log(e.message));
ctrl.abort(); // 立即终止延时任务

示例 5：单信号批量取消多个请求

一个 signal 绑定多个 fetch，一次 abort 全部终止：

const controller = new AbortController();
const { signal } = controller;

Promise.all([
  fetch('/api/user', { signal }),
  fetch('/api/order', { signal })
]);

controller.abort(); // 同时终止两个接口请求

二、业务实用场景