取消正在运行的Promise技巧详解

取消正在运行的 Promise 是前端开发中常用的技能之一，本文将提供一些技巧和实例来展示如何取消正在运行的 Promise。

什么是 Promise？

Promise 是一种能够处理异步操作的编程模式，它可以很好的解决回调地狱（callback hell）的问题。Promise 对象可以有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。通过链式调用 then() 和 catch()，可以处理 Promise 的返回结果或捕获错误。

Promise 的取消

Promise 的取消意味着中断正在进行中的异步操作。在现代浏览器中，Promise 支持取消。但是在旧版浏览器中并不支持 Promise 的取消，因此需要通过一些技巧来实现 Promise 的取消。

使用 AbortController

AbortController 是一个新的 API，它可以用于取消 Fetch 请求和其他类似于 Promise 的异步操作。在启动异步操作之前，可以通过实例化 AbortController 来创建一个终止操作的控制器。一旦异步操作完成或需要取消操作时，可以调用该控制器上的 abort() 方法来取消操作。

示例代码：

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

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

fetch('/some/api', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error(error);
    }
  });

在上面的代码中，我们创建了一个 AbortController 的实例，并传递它的 signal 属性作为 Fetch 请求的选项。setTimeout 函数设置了一个 5 秒的计时器，如果在这个时间内异步操作没有完成，就会调用 abort 方法来取消请求。在处理返回的 Promise 对象时，我们通过捕获 AbortError 来处理取消操作。

使用 Promise.race()

Promise.race() 是一个用于比较多个 Promise 对象的方法，它会返回一个新的 Promise 对象，并在其中的任何一个 Promise 结束后完成（成功或失败）。因此，我们可以利用它来实现 Promise 的取消。具体实现方式是创建一个带有一个 Promise 对象和一个控制变量的数组，并将其传递给 Promise.race() 方法。一旦控制变量被触发，Promise 就会被取消。

示例代码：

let isCancelled = false;

Promise.race([
  new Promise((resolve, reject) => {
    const timer = setTimeout(() => {
      if (!isCancelled) {
        resolve('Promise resolved');
      }
    }, 5000);
  }),
  new Promise((resolve, reject) => {
    setTimeout(() => {
      reject('Promise rejected');
    }, 3000);
  })
]).then(result => {
  console.log(result);
}).catch(error => {
  console.log(error);
});

setTimeout(() => {
  isCancelled = true;
}, 2000);

在上面的代码中，我们创建了一个返回结果为 Promise 被 resolve 的 Promise，另一个返回结果为 Promise 被 reject 的 Promise。在 Promise.race() 中传递了这两个 Promise 和一个控制变量（isCancelled）。在 setTimeout 函数中，我们将该控制变量设置为 true 来取消 Promise。在 Promise 的 resolve 或 reject 函数中，我们检查控制变量以确定是否应该终止该 Promise。

结论

本文讲解了 Promise 的取消技巧，并提供了两个示例代码。首先，我们使用了 AbortController 来取消 Fetch 请求。其次，我们使用了 Promise.race() 来比较多个 Promise，并在其它某个 Promise 完成后取消 Promise。这些技巧可以帮助开发人员有效地取消正在进行中的 Promise，从而减少资源消耗和提高性能。