剖析 Promise 的方方面面，typescript 来实践 Promise/A+ 规范

2023-11-17 10:11:56

深入了解 Promise

Promise 是一种用于处理异步操作的强大的工具，它允许你在异步操作完成后执行一些列后续操作。在 JavaScript 中，Promise 是一个内置的对象，但是我们可以使用 typescript 来实现一个符合 Promise/A+ 规范的 Promise。

Promise/A+ 规范

Promise/A+ 规范是一个定义 Promise 行为的标准，它规定了 Promise 应该如何创建、如何使用以及如何处理错误。实现一个符合 Promise/A+ 规范的 Promise 可以确保你的代码在任何环境中都能正确运行。

使用 typescript 实现 Promise

class Promise {
  private state: 'pending' | 'fulfilled' | 'rejected' = 'pending';
  private value: any;
  private reason: any;
  private onFulfilledCallbacks: Function[] = [];
  private onRejectedCallbacks: Function[] = [];

  constructor(executor: (resolve: (value: any) => void, reject: (reason: any) => void) => void) {
    try {
      executor(this.resolve.bind(this), this.reject.bind(this));
    } catch (error) {
      this.reject(error);
    }
  }

  private resolve(value: any) {
    if (this.state !== 'pending') {
      return;
    }

    this.state = 'fulfilled';
    this.value = value;
    this.onFulfilledCallbacks.forEach((callback) => {
      callback(value);
    });
  }

  private reject(reason: any) {
    if (this.state !== 'pending') {
      return;
    }

    this.state = 'rejected';
    this.reason = reason;
    this.onRejectedCallbacks.forEach((callback) => {
      callback(reason);
    });
  }

  then(onFulfilled?: (value: any) => any, onRejected?: (reason: any) => any): Promise {
    return new Promise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        setTimeout(() => {
          try {
            const value = onFulfilled ? onFulfilled(this.value) : this.value;
            resolve(value);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else if (this.state === 'rejected') {
        setTimeout(() => {
          try {
            const reason = onRejected ? onRejected(this.reason) : this.reason;
            reject(reason);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else {
        this.onFulfilledCallbacks.push((value) => {
          setTimeout(() => {
            try {
              const value = onFulfilled ? onFulfilled(value) : value;
              resolve(value);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
        this.onRejectedCallbacks.push((reason) => {
          setTimeout(() => {
            try {
              const reason = onRejected ? onRejected(reason) : reason;
              reject(reason);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
      }
    });
  }

  catch(onRejected: (reason: any) => any): Promise {
    return this.then(undefined, onRejected);
  }

  finally(onFinally: () => any): Promise {
    return this.then(
      (value) => {
        onFinally();
        return value;
      },
      (reason) => {
        onFinally();
        throw reason;
      }
    );
  }
}