以《漂亮代码会说话——手写Promise》为基准，解析手写Promise的实现

Promise：前端开发中的异步处理利器

剖析Promise实现原理

简介

JavaScript作为前端开发的主流利器，其强大的异步处理能力尤为重要。其中，Promise作为一种优秀的异步解决方案，受到了广泛的青睐。本文将深入剖析Promise的实现原理，帮助开发者更好地理解和应用这一技术。

构造函数

Promise的构造函数接收一个函数参数（executor），该函数包含resolve和reject两个参数。resolve表示异步操作成功完成，而reject表示异步操作失败。

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

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

then方法

then方法用于为Promise添加回调函数。根据Promise当前的状态（'pending'、'fulfilled'或'rejected'），执行不同的处理：

• 'fulfilled'： 直接调用onFulfilled回调，并将value作为参数传递。
• 'rejected'： 直接调用onRejected回调，并将reason作为参数传递。
• 'pending'： 将onFulfilled和onRejected回调分别推入对应的数组，等待状态变化。

catch方法

catch方法是then方法的简化版，只允许添加失败时的回调函数。内部实现类似于then方法，只是将onFulfilled回调设置为undefined。

finally方法

finally方法无论Promise状态如何变化，都会执行一个回调函数。内部实现是通过调用then方法，将onFulfilled和onRejected回调设置为同一个函数。这个函数首先执行finally回调，然后根据Promise状态，将value或reason传递给resolve或reject。

静态方法

Promise类还提供了几个静态方法，包括resolve、reject、all和race：

• resolve： 创建一个已完成且值为指定值的Promise对象。
• reject： 创建一个已完成且原因是指定原因的Promise对象。
• all： 创建一个新的Promise对象，当所有给定的Promise对象都完成后完成。
• race： 创建一个新的Promise对象，当第一个给定的Promise对象完成后完成。

结语

通过以上内容，我们深入理解了Promise的实现原理。掌握这一知识，我们可以编写出更加优雅高效的异步代码。

常见问题解答

1. Promise对象的状态有哪些？

• 'pending'：异步操作正在进行中。
• 'fulfilled'：异步操作成功完成。
• 'rejected'：异步操作失败。

2. 如何处理Promise的成功结果？

• 使用then方法添加onFulfilled回调函数。

3. 如何处理Promise的失败结果？

• 使用then或catch方法添加onRejected回调函数。

4. 如何判断Promise是否已经完成？

• 检查Promise对象的state属性，如果为'fulfilled'或'rejected'，则表示已经完成。

5. 如何等待多个Promise同时完成？

• 使用Promise.all()方法。