手写 Promise：展现开发者非凡功力

前端

2023-12-21 20:20:55

在软件开发的浩瀚世界中，掌握核心概念至关重要，而对于 JavaScript 而言，Promise 无疑是其中一颗璀璨的明珠。作为一种异步编程范式，Promise 赋予开发者控制异步操作的非凡能力。

许多开发者满足于使用现成的 Promise 库，却忽视了亲手构建它的优雅和见解。通过手写 Promise，开发者可以深入了解其内部运作，磨练自己的编程技巧，并为未来更复杂的任务奠定坚实的基础。

Promise 的核心是它所维护的状态：Pending、Fulfilled 和 Rejected。Pending 状态表示异步操作仍在进行中。Fulfilled 状态表示操作已成功完成，而 Rejected 状态则表明操作遇到了错误。

手写 Promise 涉及定义一个构造函数，接受一个执行器函数作为参数。执行器函数接收两个回调函数：resolve 和 reject，用于根据操作的结果将 Promise 转换为 Fulfilled 或 Rejected 状态。

手写 Promise 的关键优势在于对异步操作的灵活控制。通过使用 then 方法，开发者可以附加回调函数，在 Promise 转换到 Fulfilled 或 Rejected 状态时执行特定的操作。

这种机制允许开发者以链式的方式处理异步操作，创建一个连续执行任务的序列。通过这种方式，即使是最复杂的异步流程也能以清晰且可维护的方式表达。

手写 Promise 不仅仅是一项技术练习，更是一次深入理解 JavaScript 异步机制的难得机会。通过构建自己的 Promise 实现，开发者可以体验异步编程的细微差别，加深对 JavaScript 事件循环和堆栈管理的认识。

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

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

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

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

  then(onFulfilled, onRejected) {
    return new Promise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        onFulfilled(this.value);
      } else if (this.state === 'rejected') {
        onRejected(this.reason);
      } else {
        this.fulfilledCallbacks.push(() => {
          onFulfilled(this.value);
        });
        this.rejectedCallbacks.push(() => {
          onRejected(this.reason);
        });
      }
    });
  }
}