Promise的Then方法源码解读

2023-11-01 21:29:29

在本文中，我们将继续对Promise源码进行逐层解读，深入探究then方法的实现原理。then方法是Promise API的重要组成部分，它允许我们添加回调函数，以便在Promise状态改变时执行相应的操作。通过分析then方法的源码，我们可以更好地理解Promise的异步处理机制，并掌握如何使用then方法来构建异步代码。

Promise.prototype.then

Promise.prototype.then = function (onFulfilled, onRejected) {
  // 返回一个新的Promise对象
  return new Promise((resolve, reject) => {
    // 将当前Promise对象的状态变更注册到新的Promise对象中
    this.done(
      (result) => {
        try {
          // 执行onFulfilled回调函数，并将结果传递给resolve函数
          resolve(onFulfilled ? onFulfilled(result) : result);
        } catch (error) {
          // 若onFulfilled回调函数执行出错，则调用reject函数，并将错误信息传递给新的Promise对象
          reject(error);
        }
      },
      (error) => {
        try {
          // 执行onRejected回调函数，并将结果传递给resolve函数
          resolve(onRejected ? onRejected(error) : error);
        } catch (error) {
          // 若onRejected回调函数执行出错，则调用reject函数，并将错误信息传递给新的Promise对象
          reject(error);
        }
      }
    );
  });
};

源码解析

创建新的Promise对象 ：then方法返回一个新的Promise对象，该对象的状态将取决于当前Promise对象的状态。
注册状态变更回调函数 ：then方法接受两个参数，onFulfilled和onRejected，它们都是回调函数。当当前Promise对象的状态发生改变时，这些回调函数将被执行。
onFulfilled和onRejected回调函数 ：如果当前Promise对象的状态变为fulfilled，则执行onFulfilled回调函数，并将结果传递给resolve函数；如果当前Promise对象的状态变为rejected，则执行onRejected回调函数，并将错误信息传递给reject函数。
处理回调函数执行错误 ：如果onFulfilled或onRejected回调函数执行时发生错误，则将该错误传递给reject函数，以便将错误信息传递给新的Promise对象。

使用示例

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功');
  }, 1000);
});

// 添加回调函数，处理Promise状态变更
promise.then(
  (result) => {
    console.log(result); // 输出：成功
  },
  (error) => {
    console.log(error); // 不会被执行
  }
);