从 0 到 1 手写 Promise：深入剖析 Promise 的实现原理

2023-09-03 10:22:42

Promise：揭秘 JavaScript 异步编程利器

引言

在当今瞬息万变的网络世界中，异步编程已成为开发人员必备的一项技能。JavaScript 中的 Promise 机制作为一种优雅的异步处理解决方案，正风靡着整个开发领域。本文将深入剖析 Promise 的工作原理，带领你从零开始编写一个简化的 Promise 实现，让你全面领会它在 JavaScript 异步编程中的关键作用。

Promise 的基本概念

什么是 Promise？

Promise 是一种 JavaScript 对象，用于表示一个异步操作的最终状态，无论是成功（Fulfilled）还是失败（Rejected）。它提供了一种统一的方式来处理异步操作的结果，消除了回调函数的层层嵌套带来的麻烦。

实现 Promise

如何实现 Promise

为了亲身体验 Promise 的工作原理，我们从头开始编写一个简化的 Promise 实现。代码示例如下：

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

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

  resolve(result) {
    if (this.state !== 'pending') return;
    this.state = 'fulfilled';
    this.result = result;
    this.onFulfilledCallbacks.forEach(callback => callback(result));
  }

  reject(error) {
    if (this.state !== 'pending') return;
    this.state = 'rejected';
    this.result = error;
    this.onRejectedCallbacks.forEach(callback => callback(error));
  }

  then(onFulfilled, onRejected) {
    if (typeof onFulfilled !== 'function') onFulfilled = result => result;
    if (typeof onRejected !== 'function') onRejected = error => { throw error; };

    return new Promise((resolve, reject) => {
      this.onFulfilledCallbacks.push(result => {
        try {
          const result2 = onFulfilled(result);
          resolve(result2);
        } catch (error) {
          reject(error);
        }
      });

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

使用 Promise

编写好 Promise 实现后，我们就可以利用它来处理异步操作了。代码示例如下：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (Math.random() > 0.5) {
      resolve('成功');
    } else {
      reject('失败');
    }
  }, 1000);
});

promise.then((result) => {
  console.log('成功：', result);
}, (error) => {
  console.log('失败：', error);
});

Promise 的工作原理

事件循环与微任务

要理解 Promise 的工作原理，我们必须了解 JavaScript 的事件循环和微任务机制。事件循环不断监视新事件并执行相应的事件处理程序。微任务比事件优先级更高，并在每个事件循环阶段执行。

Promise 的状态转换

创建 Promise 对象时，其状态初始化为 'pending'。异步操作在后台执行，完成后 Promise 的状态会根据操作结果变为 'fulfilled' 或 'rejected'。

回调函数

使用 then 方法添加回调函数时，它们会被添加到 Promise 的 onFulfilledCallbacks 或 onRejectedCallbacks 数组中。当 Promise 的状态发生变化时，这些回调函数会被依次调用。

微任务队列

Promise 的状态发生变化时，会创建一个新的微任务并将其添加到微任务队列中。微任务队列中的微任务会在每个事件循环阶段执行。因此，当事件循环进入下一个阶段时，Promise 的回调函数将被执行。

总结

通过编写自己的 Promise 实现，我们深入理解了 Promise 的工作原理。我们了解到 Promise 如何表示异步操作的状态，如何使用回调函数处理结果，以及如何与 JavaScript 的事件循环和微任务机制交互。掌握这些原理将极大地提升你使用 Promise 的能力，编写出更加健壮的异步代码。