Promise实例：遵循规则，理解如何实现手写Promise

2024-01-27 23:07:11

揭开 Promise 的奥秘：分步指南实现手写的 Promise

引言：

在 JavaScript 的异步编程领域中，Promise 扮演着至关重要的角色。它是一种用于处理异步操作的强大工具，提供了优雅且可维护的方式来管理异步代码。然而，对于初学者而言，Promise 的内部工作原理可能显得有些神秘。本文旨在通过分步指南，让你轻松理解手写 Promise 的过程，揭开 Promise 的神秘面纱。

1. Promise 是什么？

简单来说，Promise 是一个 JavaScript 对象，它代表着异步操作的结果。它可以处于三种状态之一：

Pending（等待中）： 初始状态，表示异步操作尚未完成。
Fulfilled（已完成）： 操作成功完成，并带有结果值。
Rejected（已拒绝）： 操作失败，并带有错误原因。

2. 为什么实现手写的 Promise？

实现手写的 Promise 并不是必须的，但强烈推荐这样做，因为它具有以下好处：

深入理解 Promise 的工作原理
加强对 JavaScript 异步编程的掌握
锻炼你的编程技巧

3. 手写 Promise 的步骤

实现一个手写的 Promise 需要以下步骤：

定义 Promise 构造函数： 这是 Promise 的核心，接受一个执行器函数，它负责启动异步操作。
在执行器函数中初始化 Promise 状态： 将其设为 Pending，表示异步操作正在进行中。
处理异步操作的完成或失败： 异步操作完成后，使用 resolve 函数将状态置为 Fulfilled，并传递结果值。如果操作失败，则使用 reject 函数将状态置为 Rejected，并传递错误原因。
定义 then 方法： 这是 Promise 的关键功能，它允许你链式调用回调函数，并在 Promise 完成后处理结果或错误。

4. 代码示例

以下是一个实现手写 Promise 的示例代码：

// Promise 构造函数
function Promise(executor) {
  this.status = 'pending';
  this.result = undefined;
  this.error = undefined;
  this.onFulfilledCallbacks = [];
  this.onRejectedCallbacks = [];

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

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

  executor(resolve, reject);
}

// then 方法
Promise.prototype.then = function (onFulfilled, onRejected) {
  if (typeof onFulfilled !== 'function') {
    onFulfilled = (result) => result;
  }

  if (typeof onRejected !== 'function') {
    onRejected = (error) => { throw error; };
  }

  return new Promise((resolve, reject) => {
    if (this.status === 'fulfilled') {
      setTimeout(() => {
        try {
          const result = onFulfilled(this.result);
          resolve(result);
        } catch (error) {
          reject(error);
        }
      }, 0);
    } else if (this.status === 'rejected') {
      setTimeout(() => {
        try {
          const result = onRejected(this.error);
          resolve(result);
        } catch (error) {
          reject(error);
        }
      }, 0);
    } else {
      this.onFulfilledCallbacks.push(() => {
        setTimeout(() => {
          try {
            const result = onFulfilled(this.result);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }, 0);
      });

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