揭开Promise实现奥秘：从一道执行顺序题中一窥内部机制

2023-12-06 10:00:23

探索Promise的实现

Promise的内部机制可以用一段伪代码来

function Promise(executor) {
  // 初始状态
  this.state = "pending";
  // 储存成功回调
  this.onFulfilled = null;
  // 储存失败回调
  this.onRejected = null;
  // 储存当前Promise结果
  this.value = null;

  // 执行器函数
  try {
    executor(
      // resolve函数
      (value) => {
        // 检查当前Promise的状态是否为pending
        if (this.state === "pending") {
          // 将状态设置为fulfilled
          this.state = "fulfilled";
          // 将结果存储到value中
          this.value = value;
          // 如果有成功回调，则执行成功回调
          if (this.onFulfilled) this.onFulfilled(value);
        }
      },
      // reject函数
      (reason) => {
        // 检查当前Promise的状态是否为pending
        if (this.state === "pending") {
          // 将状态设置为rejected
          this.state = "rejected";
          // 将原因存储到value中
          this.value = reason;
          // 如果有失败回调，则执行失败回调
          if (this.onRejected) this.onRejected(reason);
        }
      }
    );
  } catch (err) {
    // 如果执行器函数抛出错误，则将Promise的状态设置为rejected
    this.state = "rejected";
    this.value = err;
    // 如果有失败回调，则执行失败回调
    if (this.onRejected) this.onRejected(err);
  }
}

// then方法
Promise.prototype.then = function (onFulfilled, onRejected) {
  // 返回一个新的Promise
  return new Promise((resolve, reject) => {
    // 如果当前Promise状态为fulfilled
    if (this.state === "fulfilled") {
      // 执行成功回调，并将其结果传递给下一个Promise
      resolve(onFulfilled(this.value));
    } else if (this.state === "rejected") {
      // 如果当前Promise状态为rejected
      // 执行失败回调，并将其原因传递给下一个Promise
      reject(onRejected(this.value));
    } else {
      // 如果当前Promise状态为pending
      // 将成功回调和失败回调存储起来，以便在Promise状态改变时执行它们
      this.onFulfilled = (value) => {
        // 执行成功回调，并将其结果传递给下一个Promise
        resolve(onFulfilled(value));
      };
      this.onRejected = (reason) => {
        // 执行失败回调，并将其原因传递给下一个Promise
        reject(onRejected(reason));
      };
    }
  });
};

剖析一道Promise执行顺序的题目

现在，让我们来分析一道Promise执行顺序的题目，以加深对Promise实现的理解。

题目：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("success");
  }, 2000);
});

promise.then((value) => {
  console.log(value);
});

console.log("start");

执行顺序：

const promise = new Promise((resolve, reject) => { ... })：创建一个新的Promise对象。
setTimeout(() => { resolve("success"); }, 2000)：使用setTimeout()函数设置一个2秒的定时器，当定时器触发时，将"success"作为参数调用resolve()函数，从而将Promise的状态设置为fulfilled。
promise.then((value) => { console.log(value); })：在Promise对象上调用then()方法，传入一个成功的回调函数。
console.log("start")：输出"start"。