用深入浅出的方式剖析Promises/A+实现原理，构建属于自己的Promise库

前端

2024-02-18 05:33:44

探索 Promises/A+：实现异步编程的可靠利器

简介

异步编程在现代 Web 开发中至关重要。它使我们能够处理不会立即完成的操作，从而实现应用程序的高响应性和流畅性。Promises/A+ 规范定义了处理 JavaScript 异步操作的标准，为我们提供了一个统一且强大的框架。

Promises/A+ 规范概述

Promises/A+ 规范定义了 Promise 对象，它表示一个异步操作的结果。Promise 可以处于三种状态：

等待（pending）：操作仍在进行中。
已完成（fulfilled）：操作已成功完成，结果可通过 value 属性访问。
已拒绝（rejected）：操作失败，原因可通过 reason 属性访问。

Promise 提供了 then() 方法，它允许我们链式调用回调函数，在 Promise 状态改变时执行相应的操作。

构建一个 Promises/A+ 库

以下是一步步的代码示例，演示如何构建一个符合 Promises/A+ 规范的 Promise 库：

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

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

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

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

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

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

  reject(reason) {
    if (this.state !== 'pending') {
      return;
    }

    this.state = 'rejected';
    this.reason = reason;
    this.onRejectedCallbacks.forEach(callback => {
      callback(reason);
    });
  }
}