Promise入门：浅析Promise实现原理及应用解析

2023-11-18 20:30:24

理解Promise的基础实现原理

Promise是一个JavaScript对象，它表示一个异步操作的最终完成（或失败）状态。Promise可以处于三种状态：等待（pending）、完成（fulfilled）和拒绝（rejected）。

当一个Promise被创建时，它将处于等待状态。当异步操作完成时，Promise将转换为完成状态，并带有最终结果。如果异步操作失败，Promise将转换为拒绝状态，并带有错误信息。

Promise可以通过then、catch和finally方法来使用。then方法用于处理Promise的状态变化，catch方法用于处理Promise的拒绝状态，finally方法用于在Promise状态变化后执行一些清理工作。

实现简易版的Promise

为了加深对Promise的理解，我们来实现一个简易版的Promise。我们的简易版Promise将具有then和catch方法，并能正确处理异步操作的状态变化。

class MyPromise {
  constructor(executor) {
    this.state = "pending";
    this.result = null;
    this.error = null;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

    const resolve = (result) => {
      if (this.state !== "pending") {
        return;
      }

      this.state = "fulfilled";
      this.result = result;

      this.onFulfilledCallbacks.forEach((callback) => {
        callback(result);
      });
    };

    const reject = (error) => {
      if (this.state !== "pending") {
        return;
      }

      this.state = "rejected";
      this.error = error;

      this.onRejectedCallbacks.forEach((callback) => {
        callback(error);
      });
    };

    try {
      executor(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }

  then(onFulfilled, onRejected) {
    return new MyPromise((resolve, reject) => {
      if (this.state === "fulfilled") {
        onFulfilled(this.result);
        resolve(this.result);
      } else if (this.state === "rejected") {
        onRejected(this.error);
        reject(this.error);
      } else {
        this.onFulfilledCallbacks.push(() => {
          onFulfilled(this.result);
          resolve(this.result);
        });

        this.onRejectedCallbacks.push(() => {
          onRejected(this.error);
          reject(this.error);
        });
      }
    });
  }

  catch(onRejected) {
    return this.then(null, onRejected);
  }

  finally(onFinally) {
    return this.then(
      (result) => {
        onFinally();
        return result;
      },
      (error) => {
        onFinally();
        throw error;
      }
    );
  }
}