Promise 的缺陷及如何支持 Promise 链中的取消操作

什么是 Promise

Promise 是一种常见的编程技术，用于管理异步操作。 通过对 Promise 对象的操作，可以指定在异步操作完成时执行的代码， 而不必等待操作完成。

Promise 的缺陷

Promise 确实是一个非常有用的技术，但它存在一些缺陷。 一个重要的缺陷是它不支持在 Promise 链中取消操作。 一旦启动了一个异步操作，就不能停止。 如果操作需要更改或中止，只能等待它完成，然后处理结果。 这可能会导致一些问题：

1. 如果操作需要很长时间才能完成，它可能会阻塞应用程序的用户界面或其他活动。

2. 如果操作依赖于外部资源，而外部资源在操作完成之前已被释放，操作就会失败。

3. 如果操作不再需要（例如，因为用户在进行操作时已经执行了另一个操作），那么继续执行该操作可能会浪费系统资源。

如何支持 Promise 链中的取消操作

为了解决这个问题，开发人员可以使用一个名为“Cancelable Promise”的技术。 可取消的 Promise 支持在 Promise 链中取消操作，以便在不必要时停止操作。 可取消的 Promise 有两个重要的修改：

1. 可取消的 Promise 必须能够在任何时间点取消执行。 这可以通过向操作添加一个取消方法来实现。 取消方法应该能够停止操作并释放任何相关资源。

2. 当使用可取消的 Promise 时，开发人员需要负责监控一个 Promise 在取消时所必须遵循的规则。 具体来说，Promise 的取消应该能够协调其他 Promise 的状态。 如果一个 Promise 被取消，任何其它与它有关的 Promise 应该被取消。

以下是一个示例 Cancelable Promise 类的代码，它支持 Promise 链中的取消操作：

class CancelablePromise {
  constructor(executor) {
    this._promise = new Promise((resolve, reject) => {
      this._resolve = resolve;
      this._reject = reject;

      executor(
        (value) => {
          if (!this._isCanceled) {
            resolve(value);
          }
        },
        (reason) => {
          if (!this._isCanceled) {
            reject(reason);
          }
        }
      );
    });

    this._isCanceled = false;
    this._cancelHandlers = [];
  }

  then(onResolved, onRejected) {
    return this._promise.then(onResolved, onRejected);
  }

  catch(onRejected) {
    return this._promise.catch(onRejected);
  }

  cancel() {
    if (this._isCanceled) {
      return;
    }

    this._isCanceled = true;
    this._cancelHandlers.forEach((handler) => {
      handler();
    });
  }

  onCancel(callback) {
    this._cancelHandlers.push(callback);
  }
}

该类有以下功能：

1. 在类构造函数中创建 Promise，该 Promise 的执行器接受两个参数作为成功和失败回调。

2. 在类中拥有 cancel 方法，用于调用 Promise 的取消处理程序，以停止操作并释放资源。

3. 还有一个 onCancel 方法，用于添加任何需要运行的取消处理程序。 这些处理程序会在 Promise 取消时调用。

4. 该类还支持 then 和 catch 方法，以便在 Promise 完成或失败时处理结果。

总结

Cancelable Promise 是解决 Promise 链中无法取消异步操作的一种技术。 该技术可协调其他 Promise 状态，并提供其他必需的控件以提高开发人员的控制能力。

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