取消异步操作：AbortController 的使用与原理

各位亲爱的开发者们，大家好！我是你们的老朋友，那个总在代码海洋里摸爬滚打，偶尔也能捞到几颗珍珠的码农老王。今天，咱们要聊聊一个听起来有点高冷，但实际上却非常实用的小玩意儿——AbortController。

想象一下，你正在厨房里辛勤地煲着一锅香气四溢的老母鸡汤，突然接到一个紧急电话，老板让你立刻去公司加班。这时候，你肯定不能傻乎乎地让那锅汤继续咕嘟咕嘟地熬下去吧？要么关火，要么让老妈来接手，总之得终止这个“煲汤”的异步操作！AbortController，就是你厨房里的那个“关火”按钮，帮你优雅地结束那些不再需要的异步操作。

一、初识 AbortController：优雅的“分手大师”

AbortController 就像一个专业的“分手大师”，它能让你在不想继续进行异步操作时，体面地结束这段“关系”，避免资源浪费和潜在的Bug。它主要有两个关键的成员：

AbortSignal: 就像一个“分手通知单”，它带着“分手”的信号，传递给需要结束的异步操作。
abort(): 这个方法就是按下“分手”按钮的动作，它会触发AbortSignal发出“分手”信号。

咱们先来看一段简单的代码，感受一下AbortController的魅力：

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

fetch('https://api.example.com/data', { signal })
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('数据加载成功:', data);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('请求被取消了！');
    } else {
      console.error('发生错误:', error);
    }
  });

// 稍后，取消请求
setTimeout(() => {
  controller.abort();
  console.log('请求已取消！');
}, 5000);

这段代码模拟了一个从 https://api.example.com/data 获取数据的 fetch 请求。我们创建了一个 AbortController 实例，并通过 controller.signal 将 AbortSignal 传递给 fetch 函数的配置项。 5 秒后，我们调用 controller.abort() 方法，这将触发 AbortSignal 发出“分手”信号，fetch 请求会立即终止，并抛出一个名为 AbortError 的错误。

二、 AbortController 的应用场景：哪里需要，哪里搬

AbortController 的应用场景非常广泛，只要涉及到异步操作，它就能派上用场。以下是一些常见的例子：

网络请求 (Fetch API, XMLHttpRequest): 这是 AbortController 最常见的应用场景。比如，用户在搜索框输入内容时，每次输入都会触发一个新的请求。如果用户输入速度很快，之前的请求可能还没有返回，就变得多余了。使用 AbortController 可以取消这些冗余的请求，节省带宽和服务器资源。
- 场景: 用户快速输入搜索关键词
- 解决方案: 每次用户输入都创建一个新的 AbortController，并取消之前的请求。
setTimeout 和 setInterval: 有时候，我们需要在特定时间后执行一些操作，或者周期性地执行某些任务。但如果条件发生变化，我们可能需要提前取消这些定时器。
- 场景: 轮播图自动播放，用户切换到其他页面
- 解决方案: 使用 AbortController 取消 setTimeout 或 setInterval。
WebSockets: 当 WebSockets 连接不再需要时，可以使用 AbortController 关闭连接。
- 场景: 聊天室用户离开
- 解决方案: 使用 AbortController 关闭 WebSocket 连接。
流 (Streams): AbortController 可以用于控制流的读取和写入，比如在读取文件时，如果用户取消操作，可以提前终止流。
- 场景: 大文件上传，用户取消上传
- 解决方案: 使用 AbortController 终止流的传输。
动画 (Animations): 在某些情况下，我们可能需要提前停止动画。
- 场景: 用户点击按钮跳过动画
- 解决方案: 使用 AbortController 停止动画。

三、 AbortController 的原理：一场精心策划的“分手戏”

AbortController 的原理并不复杂，但却非常巧妙。它主要依赖于以下几个关键点：

EventTarget: AbortSignal 继承自 EventTarget，这意味着它可以监听和触发事件。
"abort" 事件: 当调用 controller.abort() 方法时，AbortSignal 会触发一个名为 "abort" 的事件。
监听 "abort" 事件: 异步操作（比如 fetch 请求）会监听 AbortSignal 的 "abort" 事件。一旦事件被触发，异步操作就会立即终止。

可以用一张表格来更清晰地说明这个过程：

步骤	描述
1	创建 AbortController 实例，获取 AbortSignal。
2	将 AbortSignal 传递给异步操作（例如 fetch）。
3	异步操作监听 AbortSignal 的 "abort" 事件。
4	调用 `controller.abort()` 方法。
5	AbortSignal 触发 "abort" 事件。
6	异步操作接收到 "abort" 事件，执行相应的终止逻辑（例如，fetch 请求抛出 AbortError）。

四、 AbortController 的进阶用法：让“分手”更优雅

传递 "reason": abort() 方法可以接受一个可选的 "reason" 参数，用于提供取消操作的原因。这对于调试和记录日志非常有用。

controller.abort('用户取消了操作');

// 在 catch 块中：
.catch(error => {
  if (error.name === 'AbortError') {
    console.log('请求被取消了，原因:', error.message); // 输出: 请求被取消了，原因: 用户取消了操作
  }
});

多个异步操作共享同一个 AbortSignal: 你可以将同一个 AbortSignal 传递给多个异步操作，这样一次 abort() 调用就可以取消所有相关的操作。

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

const promise1 = fetch('https://api.example.com/data1', { signal });
const promise2 = fetch('https://api.example.com/data2', { signal });

Promise.all([promise1, promise2])
  .then(results => {
    console.log('所有请求都成功了:', results);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('其中一个或多个请求被取消了！');
    } else {
      console.error('发生错误:', error);
    }
  });

setTimeout(() => {
  controller.abort();
}, 3000);

与 Promise.race() 结合使用: 可以使用 Promise.race() 和 AbortController 来实现超时取消功能。

function timeout(ms, signal) {
  return new Promise((_, reject) => {
    const timer = setTimeout(() => {
      reject(new Error('请求超时'));
    }, ms);

    signal.addEventListener('abort', () => {
      clearTimeout(timer);
      reject(new DOMException('请求已取消', 'AbortError'));
    });
  });
}

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

Promise.race([
  fetch('https://api.example.com/data', { signal }),
  timeout(5000, signal)
])
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('数据加载成功:', data);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('请求被取消了！');
    } else {
      console.error('发生错误:', error);
    }
  });

// 如果请求超过 5 秒没有返回，timeout 函数会抛出错误，从而取消请求。

五、 AbortController 的兼容性：老少皆宜的“万金油”

AbortController 的兼容性非常好，主流浏览器都支持它。但是，对于一些老旧的浏览器，可能需要使用 polyfill 来提供支持。你可以使用 abortcontroller-polyfill 这个库来实现：

npm install abortcontroller-polyfill

然后在你的代码中引入它：

import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only';

// 现在你就可以像在现代浏览器中一样使用 AbortController 了。

六、 AbortController 的注意事项：细节决定成败

确保你的异步操作支持 AbortSignal: 不是所有的异步操作都支持 AbortSignal。在使用 AbortController 之前，请确保你的异步操作（例如 fetch）能够正确地处理 AbortSignal。
及时取消请求: 在不再需要异步操作时，及时调用 abort() 方法，避免资源浪费。
处理 AbortError: 在 catch 块中，务必处理 AbortError，避免程序崩溃。
不要重复使用 AbortSignal: 一个 AbortSignal 只能被 abort 一次。如果需要多次取消异步操作，请创建新的 AbortController 实例。

七、总结：让异步操作更可控

AbortController 是一个非常实用的小工具，它可以让你优雅地取消异步操作，避免资源浪费和潜在的Bug。无论是在网络请求、定时器还是流处理中，AbortController 都能发挥重要作用。掌握了 AbortController，你就能更好地控制你的异步代码，让你的程序更加健壮和高效。

好了，今天的分享就到这里。希望大家能够喜欢。记住，编程就像烹饪，掌握了合适的工具，就能做出美味佳肴！祝大家编码愉快，Bug 远离！ 🚀

发表回复 取消回复

发表回复取消回复