Promise 如何取消执行-JavaScript中文网-JavaScript教程资源分享门户

Promise 是 JavaScript 中的一种异步编程解决方案，它可以让我们更加优雅地处理异步操作。但是在实际开发中，我们常常会遇到需要取消 Promise 执行的情况，比如用户在等待过程中取消了操作，或者需要在某个条件满足时取消 Promise 执行。那么，Promise 如何取消执行呢？

Promise 取消执行的方法

在 ES6 中，Promise 并没有提供直接取消执行的方法。但是我们可以通过一些手段来实现取消 Promise 的执行，下面介绍两种方法。

方法一：使用 Promise.race

Promise.race 方法可以将多个 Promise 实例包装成一个新的 Promise 实例，只要其中一个 Promise 实例的状态发生变化，新的 Promise 实例就会跟着发生相应的变化。我们可以将一个 Promise 实例和一个取消标志 Promise 实例一起传入 Promise.race 方法中，当取消标志 Promise 实例的状态发生变化时，可以让原来的 Promise 实例不再执行。

示例代码如下：

// javascriptcn.com 代码示例
let cancelFlag = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('cancel')
  }, 5000)
})

let promise = new Promise((resolve, reject) => {
  // 这里写异步操作的代码
})

Promise.race([promise, cancelFlag]).then(res => {
  if (res === 'cancel') {
    console.log('Promise 取消执行')
  } else {
    console.log('Promise 执行成功')
  }
}).catch(err => {
  console.log('Promise 执行失败')
})

在上面的代码中，我们创建了一个取消标志 Promise 实例 cancelFlag，它的状态会在 5 秒后变为 resolved，表示取消 Promise 执行。然后我们将原来的 Promise 实例 promise 和 cancelFlag 一起传入 Promise.race 方法中，当 cancelFlag 的状态变为 resolved 时，就会让 promise 不再执行。

方法二：手动控制 Promise 状态

另一种方法是手动控制 Promise 的状态，即通过修改 Promise 的状态来实现取消执行。在 Promise 中，只有当状态为 pending 时才可以修改状态，因此我们需要在异步操作的代码中判断状态是否为 pending，如果不是就不执行异步操作。

示例代码如下：

// javascriptcn.com 代码示例
class CancelablePromise {
  constructor(executor) {
    this.promise = new Promise((resolve, reject) => {
      this.resolve = resolve
      executor(resolve, reject)
    })
    this.isCanceled = false
  }

  cancel() {
    this.isCanceled = true
  }
}

let promise = new CancelablePromise((resolve, reject) => {
  if (!promise.isCanceled) {
    // 这里写异步操作的代码
    resolve('success')
  }
})

promise.cancel()

在上面的代码中，我们创建了一个 CancelablePromise 类，它包装了一个 Promise 实例，并且具有一个 cancel 方法，通过调用 cancel 方法可以让 Promise 不再执行。在异步操作的代码中，我们判断了 CancelablePromise 的状态是否为 canceled，如果是就不执行异步操作。

总结

通过上面的介绍，我们可以知道 Promise 取消执行的方法有两种：一种是使用 Promise.race，另一种是手动控制 Promise 状态。在实际开发中，我们可以根据具体情况选择合适的方法来实现取消 Promise 执行，从而更好地处理异步操作。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6561557ad2f5e1655db65c5e