巧用方法，优雅取消JavaScript异步任务

在程序中处理异步任务通常比较麻烦，尤其是那些不支持取消异步任务的编程语言。所幸的是，JavaScript 提供了一种非常方便的机制来取消异步任务。自 ES2015 引入 Promise 以来，开发者有了取消异步任务的需求，随后推出的一些 Web API 也开始支持异步取消方案，比如 Fetch API 和 Web Workers。

使用 Promise 取消异步任务

使用 Promise 来取消异步任务非常简单。我们只需要在创建 Promise 时传递一个 AbortController 实例作为参数，然后在需要取消任务时调用 AbortController 实例的 abort() 方法即可。例如：

const controller = new AbortController();
const promise = fetch("https://example.com", { signal: controller.signal });

// 取消任务
controller.abort();

这样，fetch 请求就会被取消，并且 promise 会被拒绝。

使用 AbortController 取消异步任务

AbortController 除了可以用于取消 Promise，还可以用于取消其他类型的异步任务，比如 Web Workers 和 setTimeout。使用方法与上述类似，只需将 AbortController 实例的 signal 属性传递给异步任务即可。例如：

const controller = new AbortController();
const worker = new Worker("worker.js", { signal: controller.signal });

// 取消任务
controller.abort();

这样，worker 就会被终止，并且不会执行任何任务。

捕获异常和处理网络请求

除了使用 Promise 和 AbortController 来取消异步任务外，我们还可以通过捕获异常和处理网络请求来实现更优雅的代码编写。例如，我们可以使用 try...catch 语句来捕获 Promise 被拒绝时抛出的异常，然后根据需要进行处理。例如：

try {
  await fetch("https://example.com");
} catch (error) {
  // 处理异常
}

我们还可以使用 fetch() 方法的 then() 方法来处理网络请求的结果。如果请求成功，则会调用 then() 方法的第一个参数，否则会调用第二个参数。例如：

fetch("https://example.com").then(
  (response) => {
    // 处理成功的结果
  },
  (error) => {
    // 处理失败的结果
  }
);

通过使用 Promise、AbortController、异常处理和网络请求处理，我们可以更加优雅地编写 JavaScript 代码，并且能够更好地控制异步任务。