Promise.prototype.then方法源码剖析

2023-09-30 10:56:05

Promise.prototype.then方法简介

Promise.prototype.then方法是Promise对象的一个实例方法，用于指定在Promise对象的状态改变后要执行的回调函数。它接收两个参数：onFulfilled和onRejected。onFulfilled是Promise对象状态变为fulfilled时要执行的回调函数，onRejected是Promise对象状态变为rejected时要执行的回调函数。

Promise.prototype.then方法源码剖析

then(onFulfilled, onRejected) {
  const result = new Promise((resolve, reject) => {
    const fulfillPromise = (value) => {
      if (typeof onFulfilled === 'function') {
        try {
          const x = onFulfilled(value);
          resolvePromise(promise2, x, resolve, reject);
        } catch (err) {
          reject(err);
        }
      } else {
        resolve(value);
      }
    };

    const rejectPromise = (reason) => {
      if (typeof onRejected === 'function') {
        try {
          const x = onRejected(reason);
          resolvePromise(promise2, x, resolve, reject);
        } catch (err) {
          reject(err);
        }
      } else {
        reject(reason);
      }
    };

    this.done(fulfillPromise, rejectPromise);
  });

  return result;
}

源码解析

首先，then方法返回一个新的Promise对象，这个新的Promise对象的状态取决于onFulfilled和onRejected回调函数的执行结果。
在新的Promise对象内部，首先定义了两个回调函数：fulfillPromise和rejectPromise。
fulfillPromise回调函数用于处理Promise对象状态变为fulfilled时的逻辑。如果onFulfilled回调函数是一个函数，则执行该函数，并把Promise对象的状态变为fulfilled。如果onFulfilled回调函数不是一个函数，则直接把Promise对象的状态变为fulfilled。
rejectPromise回调函数用于处理Promise对象状态变为rejected时的逻辑。如果onRejected回调函数是一个函数，则执行该函数，并把Promise对象的状态变为rejected。如果onRejected回调函数不是一个函数，则直接把Promise对象的状态变为rejected。
然后，调用this.done方法，传递fulfillPromise和rejectPromise回调函数作为参数。this.done方法是Promise对象的另一个实例方法，用于指定当Promise对象的状态改变后要执行的回调函数。
最后，返回新的Promise对象。

Promise.prototype.then方法的使用示例

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, world!');
  }, 1000);
});

promise.then((result) => {
  console.log(result); // Hello, world!
});