JavaScript怎么实现简易的Promise对象

引言

在现代JavaScript开发中，Promise对象已经成为了处理异步操作的标准工具。它提供了一种更加优雅和可读的方式来处理异步代码，避免了传统的回调地狱（Callback Hell）问题。虽然JavaScript原生支持Promise，但理解其内部实现机制对于深入掌握异步编程至关重要。本文将带领你一步步实现一个简易的Promise对象，帮助你更好地理解其工作原理。

1. Promise的基本概念

在开始实现之前，我们先回顾一下Promise的基本概念。

1.1 什么是Promise？

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

• Pending（等待）：初始状态，既不是成功，也不是失败。
• Fulfilled（已完成）：表示操作成功完成。
• Rejected（已拒绝）：表示操作失败。

1.2 Promise的基本用法

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

promise.then((value) => {
  console.log(value); // 输出: Success!
}).catch((error) => {
  console.error(error);
});

在上面的例子中，Promise在1秒后成功完成，并调用then方法中的回调函数。

2. 实现简易Promise

接下来，我们将一步步实现一个简易的Promise对象。我们将从最基本的Promise构造函数开始，逐步添加then、catch等方法。

2.1 构造函数

首先，我们需要定义一个Promise构造函数。这个构造函数接受一个执行器函数（executor），该函数有两个参数：resolve和reject。

class MyPromise {
  constructor(executor) {
    this.state = 'pending'; // 初始状态为pending
    this.value = undefined; // 存储成功的结果
    this.reason = undefined; // 存储失败的原因
    this.onFulfilledCallbacks = []; // 存储成功的回调函数
    this.onRejectedCallbacks = []; // 存储失败的回调函数

    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onFulfilledCallbacks.forEach(callback => callback(this.value));
      }
    };

    const reject = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        this.onRejectedCallbacks.forEach(callback => callback(this.reason));
      }
    };

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

在这个构造函数中，我们定义了resolve和reject函数，并在执行器函数中调用它们。我们还维护了一个状态机，确保Promise的状态只能从pending变为fulfilled或rejected。

2.2 实现then方法

then方法是Promise的核心方法之一，它用于注册Promise成功或失败时的回调函数。

class MyPromise {
  // ... 之前的代码

  then(onFulfilled, onRejected) {
    if (this.state === 'fulfilled') {
      onFulfilled(this.value);
    } else if (this.state === 'rejected') {
      onRejected(this.reason);
    } else {
      this.onFulfilledCallbacks.push(onFulfilled);
      this.onRejectedCallbacks.push(onRejected);
    }
  }
}

在这个实现中，如果Promise已经完成或失败，我们直接调用相应的回调函数。否则，我们将回调函数存储在数组中，等待Promise状态改变时调用。

2.3 实现catch方法

catch方法用于处理Promise失败的情况，它实际上是then方法的一个特例。

class MyPromise {
  // ... 之前的代码

  catch(onRejected) {
    return this.then(null, onRejected);
  }
}

catch方法只是简单地调用了then方法，并传入null作为onFulfilled回调。

2.4 实现链式调用

Promise的一个重要特性是支持链式调用。为了实现这一点，我们需要让then方法返回一个新的Promise对象。

class MyPromise {
  // ... 之前的代码

  then(onFulfilled, onRejected) {
    const newPromise = new MyPromise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        try {
          const result = onFulfilled(this.value);
          resolve(result);
        } catch (error) {
          reject(error);
        }
      } else if (this.state === 'rejected') {
        try {
          const result = onRejected(this.reason);
          resolve(result);
        } catch (error) {
          reject(error);
        }
      } else {
        this.onFulfilledCallbacks.push((value) => {
          try {
            const result = onFulfilled(value);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        });

        this.onRejectedCallbacks.push((reason) => {
          try {
            const result = onRejected(reason);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        });
      }
    });

    return newPromise;
  }
}

在这个实现中，then方法返回一个新的Promise对象。当原Promise完成或失败时，我们调用相应的回调函数，并将结果传递给新的Promise。

2.5 处理异步操作

我们的Promise实现目前还不支持异步操作。为了支持异步操作，我们需要确保then方法中的回调函数在Promise状态改变时被调用。

class MyPromise {
  // ... 之前的代码

  then(onFulfilled, onRejected) {
    const newPromise = new MyPromise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        setTimeout(() => {
          try {
            const result = onFulfilled(this.value);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else if (this.state === 'rejected') {
        setTimeout(() => {
          try {
            const result = onRejected(this.reason);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else {
        this.onFulfilledCallbacks.push((value) => {
          setTimeout(() => {
            try {
              const result = onFulfilled(value);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });

        this.onRejectedCallbacks.push((reason) => {
          setTimeout(() => {
            try {
              const result = onRejected(reason);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
      }
    });

    return newPromise;
  }
}

在这个实现中，我们使用setTimeout将回调函数的执行推迟到下一个事件循环中，从而确保异步操作的正确执行。

2.6 实现Promise.resolve和Promise.reject

Promise.resolve和Promise.reject是Promise类的静态方法，用于快速创建一个已解决或已拒绝的Promise。

class MyPromise {
  // ... 之前的代码

  static resolve(value) {
    return new MyPromise((resolve) => {
      resolve(value);
    });
  }

  static reject(reason) {
    return new MyPromise((resolve, reject) => {
      reject(reason);
    });
  }
}

2.7 实现Promise.all

Promise.all方法用于将多个Promise实例包装成一个新的Promise实例，只有当所有Promise都成功时，新的Promise才会成功。

class MyPromise {
  // ... 之前的代码

  static all(promises) {
    return new MyPromise((resolve, reject) => {
      const results = [];
      let completedCount = 0;

      promises.forEach((promise, index) => {
        promise.then((value) => {
          results[index] = value;
          completedCount++;

          if (completedCount === promises.length) {
            resolve(results);
          }
        }).catch((error) => {
          reject(error);
        });
      });
    });
  }
}

在这个实现中，我们遍历所有的Promise实例，并在每个Promise成功时将其结果存储在results数组中。当所有Promise都成功时，我们调用resolve方法。

2.8 实现Promise.race

Promise.race方法用于将多个Promise实例包装成一个新的Promise实例，新的Promise的状态由最先完成的Promise决定。

class MyPromise {
  // ... 之前的代码

  static race(promises) {
    return new MyPromise((resolve, reject) => {
      promises.forEach((promise) => {
        promise.then((value) => {
          resolve(value);
        }).catch((error) => {
          reject(error);
        });
      });
    });
  }
}

在这个实现中，我们遍历所有的Promise实例，并在第一个Promise完成时调用resolve或reject方法。

3. 测试我们的简易Promise

现在，我们已经实现了一个简易的Promise对象。让我们通过一些测试用例来验证它的正确性。

3.1 基本用法测试

const promise = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve('Success!');
  }, 1000);
});

promise.then((value) => {
  console.log(value); // 输出: Success!
}).catch((error) => {
  console.error(error);
});

3.2 链式调用测试

const promise = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve(1);
  }, 1000);
});

promise.then((value) => {
  console.log(value); // 输出: 1
  return value + 1;
}).then((value) => {
  console.log(value); // 输出: 2
}).catch((error) => {
  console.error(error);
});

3.3 Promise.all测试

const promise1 = MyPromise.resolve(1);
const promise2 = MyPromise.resolve(2);
const promise3 = MyPromise.resolve(3);

MyPromise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // 输出: [1, 2, 3]
}).catch((error) => {
  console.error(error);
});

3.4 Promise.race测试

const promise1 = new MyPromise((resolve) => {
  setTimeout(() => {
    resolve('Promise 1');
  }, 500);
});

const promise2 = new MyPromise((resolve) => {
  setTimeout(() => {
    resolve('Promise 2');
  }, 1000);
});

MyPromise.race([promise1, promise2]).then((value) => {
  console.log(value); // 输出: Promise 1
}).catch((error) => {
  console.error(error);
});

4. 总结

通过本文，我们一步步实现了一个简易的Promise对象。虽然这个实现并不完整，但它涵盖了Promise的核心功能，包括状态管理、链式调用、异步操作处理等。通过这个实现，我们不仅加深了对Promise的理解，还为后续学习更复杂的异步编程模式打下了坚实的基础。

在实际开发中，JavaScript原生的Promise对象已经非常成熟和强大，建议直接使用原生Promise。但对于想要深入理解Promise内部机制的开发者来说，手动实现一个简易的Promise是一个非常有益的练习。