2026西湖龙井茶官网DTC发售：茶农直供，政府溯源防伪到农户家 

使用 JavaScript 的 AbortController 优雅地中止异步操作

现代网络应用程序严重依赖于异步操作，例如从 API 获取数据、延迟处理用户输入，或执行长时间运行的计算。如果没有妥善管理，这些操作可能导致不良行为：过时的数据、竞态条件（即较早请求的响应覆盖了较新请求的结果），甚至在资源未被正确清理时引发内存泄漏。

JavaScript 的 AbortController 提供了一种标准化的方式来向可取消的异步操作发送中止信号。它是一种强大的工具，有助于维持应用程序的稳定性和响应能力，为以往常需复杂自定义逻辑才能解决的问题提供了原生且优雅的解决方案。

理解 AbortController

AbortController 是一个简单的 Web API 对象，包含两个主要组成部分：signal 属性和 abort() 方法。

• new AbortController()：创建一个新的控制器实例。
• controller.signal：这是一个 AbortSignal 对象。它是一个事件目标，你可以将其传递给支持取消的异步 API。当调用 abort() 方法时，signal 会触发一个 abort 事件。
• controller.abort()：触发取消操作。这会将 signal.aborted 属性设为 true，并在关联的 signal 上派发一个 abort 事件。

许多内置的 Web API（尤其是 fetch）以及某些 DOM API（如 addEventListener）原生支持使用 AbortSignal 进行取消操作。自定义的异步操作也可以与之集成。

示例 1：基本的 Fetch 取消操作

AbortController 最常见的用途是取消 fetch 请求。设想这样一种场景：用户在大型数据获取完成之前离开了当前页面。继续执行该获取操作不仅浪费资源，而且其最终返回的响应还可能触发不必要的状态更新。

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

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data', { signal });
    const data = await response.json();
    console.log('数据已获取：', data);
  } catch (