使用 AbortController 取消异步请求，比如 xmlHttpRequest/fetch 发起的请求。

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

fetch("https://api.example.com/data", { signal })
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((err) => {
    if (err.name === "AbortError") {
      console.log("请求被取消");
    } else {
      console.error("其他错误", err);
    }
  });

// 3 秒后取消请求
setTimeout(() => {
  controller.abort();
}, 3000);

同时 abortController 不仅仅只是用来取消异步请求，它还可以用来取消 addEventListener 事件监听，再也不需要通过 removeEventListener 来取消监听了，省的每次还得保留回调函数引用来移除监听器，直接一步到位使用 abort 取消

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

document.addEventListener(
  "click",
  () => {
    console.log("点击了页面");
  },
  { signal }
);

// 5 秒后自动移除监听器
setTimeout(() => {
  controller.abort();
  console.log("事件监听器已取消");
}, 5000);

取消定时任务或者其他异步逻辑等

async function doSomething(signal) {
  await new Promise((resolve, reject) => {
    const id = setTimeout(resolve, 5000);
    signal.addEventListener("abort", () => {
      clearTimeout(id);
      reject(new DOMException("Aborted", "AbortError"));
    });
  });
}

AbortController MDN