解密Promise：从基础解析到亲手实现

2023-10-23 06:26:00

在现代JavaScript中，Promise是异步编程的重要工具，它可以使代码更加结构化和可读，并有助于处理复杂的异步任务。本文将带领你深入了解Promise的内部机制，并一步步实现一个完整的Promise。

Promise基础

Promise是一个对象，它代表一个异步操作的最终完成或失败的结果。Promise有三种状态：

Pending： 初始状态，表示异步操作尚未完成。
Fulfilled： 成功状态，表示异步操作已成功完成，并带有结果值。
Rejected： 失败状态，表示异步操作已失败，并带有错误信息。

Promise的使用

要使用Promise，你需要先创建一个Promise实例。可以使用new Promise()构造函数来创建Promise实例，构造函数的参数是一个执行器函数。执行器函数有两个参数，分别是resolve和reject。resolve函数用于将Promise的状态改为Fulfilled，并传入结果值。reject函数用于将Promise的状态改为Rejected，并传入错误信息。

const promise = new Promise((resolve, reject) => {
  // 异步操作代码
  if (success) {
    resolve('成功！');
  } else {
    reject('失败！');
  }
});

创建好Promise实例后，可以使用then()方法来处理Promise的状态改变。then()方法有两个参数，分别是onFulfilled和onRejected。onFulfilled函数在Promise的状态变为Fulfilled时执行，onRejected函数在Promise的状态变为Rejected时执行。

promise.then(
  (result) => {
    // Promise成功完成时的处理逻辑
  },
  (error) => {
    // Promise失败时的处理逻辑
  }
);

Promise的实现

现在我们来一步步实现一个完整的Promise。首先，我们需要定义一个Promise类。

class Promise {
  constructor(executor) {
    this.state = 'pending';
    this.result = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

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

  resolve(result) {
    if (this.state !== 'pending') {
      return;
    }

    this.state = 'fulfilled';
    this.result = result;

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

  reject(error) {
    if (this.state !== 'pending') {
      return;
    }

    this.state = 'rejected';
    this.result = error;

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

  then(onFulfilled, onRejected) {
    if (typeof onFulfilled !== 'function') {
      onFulfilled = (result) => result;
    }

    if (typeof onRejected !== 'function') {
      onRejected = (error) => { throw error; };
    }

    const promise = new Promise(() => {});

    this.onFulfilledCallbacks.push((result) => {
      try {
        const fulfilledResult = onFulfilled(result);

        if (fulfilledResult instanceof Promise) {
          fulfilledResult.then(
            (result) => {
              promise.resolve(result);
            },
            (error) => {
              promise.reject(error);
            }
          );
        } else {
          promise.resolve(fulfilledResult);
        }
      } catch (error) {
        promise.reject(error);
      }
    });

    this.onRejectedCallbacks.push((error) => {
      try {
        const rejectedResult = onRejected(error);

        if (rejectedResult instanceof Promise) {
          rejectedResult.then(
            (result) => {
              promise.resolve(result);
            },
            (error) => {
              promise.reject(error);
            }
          );
        } else {
          promise.resolve(rejectedResult);
        }
      } catch (error) {
        promise.reject(error);
      }
    });

    return promise;
  }
}