精通 JavaScript AbortController：实现无缝的请求取消

在现代 Web 开发的动态世界中，异步操作是构建响应迅速、引人入胜的用户体验的基石。从 API 获取数据到处理用户交互，JavaScript 经常需要处理耗时的任务。然而，当用户在请求完成前离开页面，或者后续请求取代了前一个请求时，会发生什么呢？如果没有适当的管理，这些正在进行的操作可能会导致资源浪费、数据过时，甚至引发意外错误。这正是 JavaScript AbortController API 大放异彩的地方，它为取消异步操作提供了一个强大且标准化的机制。

请求取消的必要性

设想一个典型场景：用户在搜索框中输入，每次按键，您的应用程序都会发起一个 API 请求来获取搜索建议。如果用户输入得很快，可能会有多个请求同时在进行中。如果用户在这些请求待处理时导航到另一个页面，那么即使响应到达，它们也已经无关紧要，处理它们只会浪费宝贵的客户端资源。此外，服务器可能已经处理了这些请求，造成了不必要的计算成本。

另一个常见情况是用户发起一个操作，比如上传文件，但中途决定取消。或者，一个长时间运行的操作（如获取一个大型数据集）因为一个新的、更相关的请求已经发出而不再需要。在所有这些情况下，能够优雅地终止这些正在进行的操作至关重要，这有助于：

• 提升用户体验： 防止显示过时或无关的数据，避免不必要的 UI 更新，并保持应用程序的流畅感。
• 优化资源使用： 通过不下载不必要的数据来节省带宽，通过不处理已完成但不再需要的操作来减少 CPU 周期，并释放内存。
• 防止竞态条件： 确保只处理最新的相关数据，避免旧的、被取代的请求响应覆盖新数据的情况。

AbortController API 简介

AbortController 接口提供了一种向一个或多个 JavaScript 异步操作发送中止请求信号的方法。它旨在与支持 AbortSignal 的 API 协同工作，其中最著名的是现代的 fetch API。

AbortController 的核心主要有两个组件：

• AbortController 实例： 这是您实例化的对象，用于创建一个新的取消机制。
• signal 属性： 每个 AbortController 实例都有一个 signal 属性，它是一个 AbortSignal 对象。这个 AbortSignal 对象就是您传递给希望能够取消的异步操作的对象。

AbortController 还有一个方法：

• abort()： 在 AbortController 实例上调用此方法会立即触发关联的 AbortSignal，将其标记为已中止。任何监听此信号的操作都会收到通知并可以相应地采取行动。

AbortController 如何与 Fetch 协同工作

fetch API 是 AbortController 的主要且最常见的用例。在发起 fetch 请求时，您可以在 options 对象中传递一个 AbortSignal 对象。如果该信号被中止，fetch 操作将被提前终止。

基本示例：取消单个 Fetch 请求

让我们用一个简单的例子来说明。假设我们想从一个 API 获取数据，但如果用户在请求完成前决定离开，我们希望能够取消这个请求。

```javascript // 创建一个新的 AbortController 实例 const controller = new AbortController(); const signal = controller.signal; // API 端点的 URL const apiUrl = 'https://api.example.com/data'; console.log('正在发起 fetch 请求...'); fetch(apiUrl, { signal: signal // 将 signal 传递给 fetch 选项 }) .then(response => { if (!response.ok) { throw new Error(`HTTP 错误！状态码: ${response.status}`); } return response.json(); }) .then(data => { console.log('数据已接收:', data); // 处理接收到的数据 }) .catch(error => { if (error.name === 'AbortError') { console.log('Fetch 请求已被中止。'); } else { console.error('Fetch 错误:', error); } }); // 模拟 5 秒后取消请求 setTimeout(() => { console.log('正在中止 fetch 请求...'); controller.abort(); // 这将触发 .catch 代码块并抛出 AbortError }, 5000); ```

在这个例子中：

• 我们创建了一个 AbortController 并提取其 signal。
• 我们将这个 signal 传递给 fetch 的选项。
• 如果在 fetch 完成之前调用了 controller.abort()，fetch 返回的 promise 将会因 AbortError 而被拒绝。
• .catch() 代码块特意检查这个 AbortError，以区分是真正的网络错误还是取消操作。

实践建议： 当将 AbortController 与 fetch 一起使用时，总是在 catch 块中检查 error.name === 'AbortError'，以便优雅地处理取消操作。

使用单个控制器处理多个请求

一个 AbortController 可以用来中止多个监听其 signal 的操作。这对于用户操作可能导致多个正在进行的请求失效的场景非常有用。例如，如果用户离开一个仪表板页面，您可能希望中止与该仪表板相关的所有未完成的数据获取请求。

```javascript const controller = new AbortController(); const signal = controller.signal; const apiUrl1 = 'https://api.example.com/users'; const apiUrl2 = 'https://api.example.com/products'; function fetchData(url, name) { console.log(`正在发起 ${name} fetch 请求...`); return fetch(url, { signal: signal }) .then(response => { if (!response.ok) { throw new Error(`HTTP 错误！状态码: ${response.status}`); } return response.json(); }) .then(data => { console.log(`${name} 数据已接收:`, data); }) .catch(error => { if (error.name === 'AbortError') { console.log(`${name} fetch 请求已被中止。`); } else { console.error(`${name} fetch 错误:`, error); } }); } // 发起多个 fetch 请求 fetchData(apiUrl1, 'Users'); fetchData(apiUrl2, 'Products'); // 模拟 7 秒后取消所有请求 setTimeout(() => { console.log('正在中止所有 fetch 请求...'); controller.abort(); }, 7000); ```

在这里，'Users' 和 'Products' 的 fetch 操作都使用了同一个 signal。当 controller.abort() 被调用时，两个请求都将被终止。

全局视角： 对于具有许多可能独立发起 API 调用的组件的复杂应用程序来说，这种模式非常宝贵。例如，一个国际电商平台可能有产品列表、用户资料和购物车摘要等组件，都在获取数据。如果用户从一个产品类别快速导航到另一个类别，一个 abort() 调用就可以清理掉与前一个视图相关的所有待处理请求。

AbortSignal 事件监听器

虽然 fetch 会自动处理中止信号，但其他异步操作可能需要为中止事件进行显式注册。AbortSignal 对象提供了一个 addEventListener 方法，允许您监听 'abort' 事件。当将 AbortController 与自定义异步逻辑或在其配置中不直接支持 signal 选项的库集成时，这一点尤其有用。

```javascript const controller = new AbortController(); const signal = controller.signal; function performLongTask(signal) { return new Promise((resolve, reject) => { const taskDuration = 10000; // 任务耗时 10 秒 let elapsedTime = 0; const intervalId = setInterval(() => { elapsedTime += 1000; console.log(`任务进度: ${elapsedTime / 1000}s`); if (elapsedTime >= taskDuration) { clearInterval(intervalId); resolve('任务成功完成！'); } }, 1000); // 监听 abort 事件 signal.addEventListener('abort', () => { clearInterval(intervalId); console.log('长时间任务已通过事件监听器中止。'); reject(new DOMException('已中止', 'AbortError')); }); }); } console.log('正在开始长时间任务...'); performLongTask(signal) .then(result => console.log(result)) .catch(error => { if (error.name === 'AbortError') { console.log('操作已被中止。'); } else { console.error('发生意外错误：', error); } }); // 3 秒后中止任务 setTimeout(() => { console.log('正在发起中止...'); controller.abort(); }, 3000); ```

在这个例子中：

• performLongTask 函数接受一个 AbortSignal。
• 它设置了一个定时器来模拟进度。
• 关键在于，它为 signal 的 'abort' 事件添加了一个事件监听器。当事件触发时，它会清除定时器并用 AbortError 拒绝 promise。

实践建议： addEventListener('abort', callback) 模式对于自定义异步逻辑至关重要，它能确保您的代码能够响应来自外部的取消信号。

signal.aborted 属性

AbortSignal 还有一个布尔属性 aborted，如果信号已被中止，它返回 true，否则返回 false。虽然它不直接用于发起取消操作，但在您的异步逻辑中检查信号的当前状态可能很有用。

```javascript const controller = new AbortController(); const signal = controller.signal; function checkStatus(signal) { if (signal.aborted) { console.log('无法检查状态，信号已被中止。'); return; } console.log('正在检查状态...'); // 模拟一些工作... setTimeout(() => { if (!signal.aborted) { console.log('状态检查完成。'); } else { console.log('状态检查因中止而中断。'); } }, 2000); } checkStatus(signal); // 1 秒后中止 setTimeout(() => { console.log('正在中止...'); controller.abort(); }, 1000); ```

在这段代码中，signal.aborted 允许您在继续执行可能消耗大量资源的操作之前检查状态。虽然 fetch API 内部处理了这一点，但自定义逻辑可能会从这类检查中受益。

Fetch 之外：其他用例

虽然 fetch 是 AbortController 最著名的用户，但其潜力可以扩展到任何可以设计为监听 AbortSignal 的异步操作。这包括：

• 长时间运行的计算： Web Workers、复杂的 DOM 操作或密集的数据处理。
• 定时器： 尽管 setTimeout 和 setInterval 不直接接受 AbortSignal，但您可以像 performLongTask 示例中那样将它们包装在支持的 promise 中。
• 其他库： 许多处理异步操作的现代 JavaScript 库（例如，一些数据获取库、动画库）正开始集成对 AbortSignal 的支持。

示例：将 AbortController 与 Web Workers 结合使用

Web Workers 非常适合将繁重任务从主线程中卸载。您可以与 Web Worker 通信并为其提供一个 AbortSignal，以允许取消在 worker 中正在进行的工作。

main.js

```javascript // 创建一个 Web Worker const worker = new Worker('worker.js'); // 为 worker 任务创建一个 AbortController const controller = new AbortController(); const signal = controller.signal; console.log('正在向 worker 发送任务...'); // 将任务数据和信号发送给 worker worker.postMessage({ task: 'processData', data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], signal: signal // 注意：Signal 不能像这样直接传输。 // 我们需要发送一条消息，worker 可以用它来 // 创建自己的信号或监听消息。 // 一个更实际的方法是发送一条中止消息。 }); // 一种更可靠的通过 worker 处理信号的方式是通过消息传递： // 让我们优化一下：我们发送一个 'start' 消息和一个 'abort' 消息。 worker.postMessage({ command: 'startProcessing', payload: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }); worker.onmessage = function(event) { console.log('来自 worker 的消息:', event.data); }; // 模拟 3 秒后中止 worker 任务 setTimeout(() => { console.log('正在中止 worker 任务...'); // 向 worker 发送一个 'abort' 命令 worker.postMessage({ command: 'abortProcessing' }); }, 3000); // 完成后不要忘记终止 worker // worker.terminate(); ```

worker.js

```javascript let processingInterval = null; let isAborted = false; self.onmessage = function(event) { const { command, payload } = event.data; if (command === 'startProcessing') { isAborted = false; console.log('Worker 已收到 startProcessing 命令。Payload:', payload); let progress = 0; const total = payload.length; processingInterval = setInterval(() => { if (isAborted) { clearInterval(processingInterval); console.log('Worker: 处理已中止。'); self.postMessage({ status: 'aborted' }); return; } progress++; console.log(`Worker: 正在处理项目 ${progress}/${total}`); if (progress === total) { clearInterval(processingInterval); console.log('Worker: 处理完成。'); self.postMessage({ status: 'completed', result: '已处理所有项目' }); } }, 500); } else if (command === 'abortProcessing') { console.log('Worker 已收到 abortProcessing 命令。'); isAborted = true; // 由于 isAborted 检查，定时器将在下一次触发时自行清除。 } }; ```

解释：

• 在主线程中，我们创建了一个 AbortController。
• 我们没有直接传递 signal（因为它是一个复杂的对象，不易传输），而是使用了消息传递。主线程发送一个 'startProcessing' 命令，稍后再发送一个 'abortProcessing' 命令。
• worker 监听这些命令。当它收到 'startProcessing' 时，它开始工作并设置一个定时器。它还使用一个由 'abortProcessing' 命令管理的标志 isAborted。
• 当 isAborted 变为 true 时，worker 的定时器会自行清理，并报告任务已被中止。

实践建议： 对于 Web Workers，实现一个基于消息的通信模式来发出取消信号，从而有效地模仿 AbortSignal 的行为。

最佳实践与注意事项

为了有效地利用 AbortController，请牢记以下最佳实践：

• 清晰命名： 为您的控制器使用描述性的变量名（例如 dashboardFetchController、userProfileController）以有效地管理它们。
• 作用域管理： 确保控制器的作用域适当。如果一个组件被卸载，取消与其关联的任何待处理请求。
• 错误处理： 始终区分 AbortError 和其他网络或处理错误。
• 控制器生命周期： 一个控制器只能中止一次。如果您需要随时间推移取消多个独立的操作，您将需要多个控制器。但是，如果多个操作共享同一个信号，一个控制器可以同时中止它们。
• DOM AbortSignal： 请注意 AbortSignal 接口是一个 DOM 标准。虽然得到了广泛支持，但如有必要，请确保与旧环境的兼容性（尽管在现代浏览器和 Node.js 中支持通常很好）。
• 清理工作： 如果您在基于组件的架构（如 React、Vue、Angular）中使用 AbortController，请确保在清理阶段（例如，`componentWillUnmount`、`useEffect` 返回函数、`ngOnDestroy`）调用 controller.abort()，以在组件从 DOM 中移除时，防止内存泄漏和意外行为。

全局视角： 当为全球受众开发时，要考虑到网络速度和延迟的可变性。连接较差地区的用户可能会经历更长的请求时间，这使得有效的取消操作对于防止他们的体验显著下降更为关键。设计您的应用程序时注意这些差异是关键。

结论

AbortController 及其关联的 AbortSignal 是管理 JavaScript 异步操作的强大工具。通过提供一种标准化的方式来发出取消信号，它们使开发人员能够构建更健壮、高效和用户友好的应用程序。无论您是处理简单的 fetch 请求还是编排复杂的工作流，理解和实施 AbortController 是任何现代 Web 开发人员的基本技能。

精通使用 AbortController 进行请求取消，不仅能提升性能和资源管理，还直接有助于提供卓越的用户体验。在您构建交互式应用程序时，请记得集成这个关键的 API 来优雅地处理待处理的操作，确保您的应用程序在全球所有用户中保持响应迅速和可靠。