从零基础到高手：揭秘 Promise 源代码，掌握每个 API

前端

2023-12-10 16:05:41

前言

万字长文，带你从 0 到 1，手撸 Promise 源码，清除了解每一个常用 API。在本文中，我们将踏上一次代码探险之旅，从头开始构建 Promise 源码，揭秘其内部运作原理。准备好提升你的 JavaScript 编程技能了吗？

Promise 入门

Promise 是 JavaScript 中用于处理异步操作的神奇工具。它允许我们以一种优雅且可控的方式处理异步代码，让我们的程序更加健壮和易于理解。

Promise 的三大状态

每个 Promise 都有三个状态：

Pending： 这是 Promise 的初始状态，表示操作尚未完成。
Fulfilled： 当操作成功完成时，Promise 进入已完成状态，并带有一个值。
Rejected： 当操作失败时，Promise 进入已拒绝状态，并带有一个错误对象。

Promise 的 API

Promise 提供了一系列 API，用于处理不同状态的 Promise：

then()： 用于处理已完成的 Promise，并返回一个新的 Promise。
catch()： 用于处理已拒绝的 Promise，并返回一个新的 Promise。
finally()： 无论 Promise 是完成还是拒绝，都会执行的回调函数。

Promise 源码实现

现在，我们开始构建 Promise 的源代码。为了简化起见，我们将只实现基本功能。

Promise 构造函数

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

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

resolve() 和 reject() 方法

resolve(value) {
  if (this.state !== "pending") return;

  this.state = "fulfilled";
  this.value = value;
  this.onFulfilledCallbacks.forEach(callback => callback(value));
}

reject(error) {
  if (this.state !== "pending") return;

  this.state = "rejected";
  this.error = error;
  this.onRejectedCallbacks.forEach(callback => callback(error));
}

then() 方法

then(onFulfilled, onRejected) {
  return new Promise((resolve, reject) => {
    if (this.state === "fulfilled") {
      const result = onFulfilled(this.value);

      if (result instanceof Promise) {
        result.then(resolve, reject);
      } else {
        resolve(result);
      }
    } else if (this.state === "rejected") {
      if (onRejected) {
        const result = onRejected(this.error);

        if (result instanceof Promise) {
          result.then(resolve, reject);
        } else {
          resolve(result);
        }
      } else {
        reject(this.error);
      }
    } else {
      this.onFulfilledCallbacks.push(onFulfilled);
      this.onRejectedCallbacks.push(onRejected);
    }
  });
}