掌握手写 Promise 的艺术：高级开发者的必备技能

2023-10-10 07:26:09

掌握手写 Promise 是高级开发者必须掌握的一项技能，它不仅能提升代码的可读性，还能帮助开发者深入理解 Promise 的底层机制。本文将深入浅出地讲解如何一步步编写一个符合 Promise A+ 规范的 Promise 库，从基础概念到实现细节，循序渐进，让开发者对 Promise 有一个全面系统的认识。

绪论

在现代 JavaScript 开发中，Promise 已成为处理异步任务的标准工具。它提供了优雅简洁的方式来处理异步操作的结果，避免了回调地狱的困扰。对于高级开发者而言，理解 Promise 的底层机制并能够手写 Promise 库至关重要。

Promise A+ 规范

Promise A+ 规范定义了 Promise 的行为和特性。遵循该规范对于实现兼容且可互操作的 Promise 库至关重要。规范规定了 Promise 的状态、如何解决和拒绝 Promise 以及如何链式调用 Promise 等关键方面。

实现 Promise

创建一个符合 Promise A+ 规范的 Promise 库涉及以下步骤：

创建 Promise 实例： Promise 实例表示一个异步操作的结果，它可以处于三种状态之一：待定、已解决或已拒绝。
定义 then 方法： then 方法允许开发者在 Promise 解决或拒绝时附加回调函数。
定义 catch 方法： catch 方法允许开发者在 Promise 拒绝时附加回调函数。
解决或拒绝 Promise： resolve 和 reject 函数用于解决或拒绝 Promise，从而触发附加的回调函数。

示例代码

以下是用 JavaScript 手写 Promise 库的示例代码：

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

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

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

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

  then(onFulfilled, onRejected) {
    return new Promise((resolve, reject) => {
      if (this.state === "fulfilled") {
        setTimeout(() => {
          try {
            const result = onFulfilled(this.value);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else if (this.state === "rejected") {
        setTimeout(() => {
          try {
            const result = onRejected(this.reason);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else {
        this.onFulfilledCallbacks.push(() => {
          setTimeout(() => {
            try {
              const result = onFulfilled(this.value);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
        this.onRejectedCallbacks.push(() => {
          setTimeout(() => {
            try {
              const result = onRejected(this.reason);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
      }
    });
  }

  catch(onRejected) {
    return this.then(null, onRejected);
  }

  finally(onFinally) {
    return this.then(
      (value) => Promise.resolve(onFinally()).then(() => value),
      (reason) => Promise.resolve(onFinally()).then(() => { throw reason; })
    );
  }
}