新手也能轻松理解的 Promise 源码解读

前端

2023-11-30 14:15:34

前言

Promise 是一种强大的工具，用于管理异步操作。它已被广泛用于各种应用程序中，从前端开发到后端服务。为了深入了解 Promise 的内部机制，本文将带你踏上探索其源码的旅程。

Promise 源码概述

Promise 的源码位于 JavaScript 运行时的核心库中。它由三个主要部分组成：

构造函数： 创建 Promise 实例。
then() 方法： 处理 Promise 的结果（无论成功还是失败）。
catch() 方法： 处理 Promise 的失败。

构造函数

Promise 构造函数接收一个执行器函数作为参数，该函数有 resolve 和 reject 两个回调。

const promise = new Promise((resolve, reject) => {
  // 异步操作...
});

resolve()： 成功时调用，带有结果作为参数。
reject()： 失败时调用，带有错误作为参数。

then() 方法

then() 方法是 Promise 最重要的部分之一。它允许你添加回调来处理 Promise 的结果。

promise.then(
  (result) => {
    // 成功处理
  },
  (error) => {
    // 失败处理
  }
);

成功回调： 在 Promise 成功解决时调用。
失败回调： 在 Promise 被拒绝时调用。

catch() 方法

catch() 方法是一个特殊的 then() 方法，它只处理 Promise 失败的情况。

promise.catch((error) => {
  // 失败处理
});

源代码分析

Promise 源码相当复杂，但可以分解为更小的可管理部分。

构造函数： 创建 Promise 实例并初始化其内部状态（待定、已解决或已拒绝）。
then() 方法： 向 Promise 添加一个回调，并在 Promise 解决后调用。它返回一个新的 Promise，表示原始 Promise 和回调结果的组合。
catch() 方法： 向 Promise 添加一个回调，只在 Promise 被拒绝时调用。它返回一个新的 Promise，表示原始 Promise 和回调结果的组合。

实战：编写一个 Promise

要编写自己的 Promise，请遵循以下步骤：

创建一个执行器函数，接收 resolve 和 reject 回调。
在执行器函数中，执行异步操作。
根据异步操作的结果调用 resolve() 或 reject()。

示例：

const getUserName = (userId) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`User ${userId}`);
    }, 1000);
  });
};

getUserName(1).then((name) => {
  console.log(`Welcome, ${name}!`);
});