AbortController 取消异步操作

AbortController：controller.abort()取消fetch请求（signal参数）、取消事件监听（addEventListener的signal选项）、取消流读取、与Promise和async/await集成模式 · 难度：入门 · +10XP

AbortController —— 取消异步操作

用户快速切换页面时，之前的fetch请求还在进行中——浪费带宽还可能引起bug。AbortController让你可以随时取消fetch请求和任何支持signal的异步操作。

取消fetch

const controller = new AbortController();
const signal = controller.signal;
fetch('/api/data', { signal })
  .then(res => res.json())
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('请求被用户取消了');
    }
  });
// 5秒后取消
setTimeout(() => controller.abort(), 5000);

动手练习

1. 基础练习：做一个搜索框——每次输入都会取消上一次的搜索请求。
2. 进阶应用：用同一个signal同时取消多个fetch请求（一个控制器控制多个请求）。
3. 项目实战：在React或Vue组件的清理函数中用AbortController取消未完成的请求。