面对Promise/A+规范，从容落地

2023-12-31 07:41:00

实现 Promise/A+ 规范，从容落地

前言

在前端开发中，异步编程是必不可少的技能，而 Promise 是处理异步操作的有力工具。Promise/A+ 规范定义了 Promise 的行为和实现要求，确保了不同环境和框架中的 Promise 行为一致。本文将深入解读 Promise/A+ 规范，指导读者轻松实现自己的 Promise。

Promise 的三种状态

Promise 有三种状态：pending、fulfilled 和 rejected。

pending ：初始状态，表示 Promise 尚未完成。
fulfilled ：成功状态，表示 Promise 已成功完成，并具有一个值。
rejected ：失败状态，表示 Promise 已失败完成，并具有一个原因。

Promise/A+ 规范要点

Promise/A+ 规范规定了 Promise 的行为和实现要求，主要包括以下几点：

Promise 必须提供 then 方法 。then 方法接受两个回调函数作为参数，第一个回调函数用于处理 Promise 成功完成的情况，第二个回调函数用于处理 Promise 失败完成的情况。
Promise 的状态只能从 pending 变为 fulfilled 或 rejected ，且只能改变一次。
Promise 的 then 方法可以被多次调用 ，但只能触发一次成功回调或失败回调。
Promise 的 then 方法可以返回一个新的 Promise 。
Promise 的 then 方法可以被链式调用 。

实现 Promise/A+ 规范

实现 Promise/A+ 规范，可以遵循以下步骤：

定义 Promise 类，并提供 then 方法。
在 then 方法中，检查 Promise 的状态，并调用相应的回调函数。
如果 Promise 的状态是 pending，则将回调函数保存起来，等待 Promise 完成。
如果 Promise 的状态是 fulfilled 或 rejected，则直接调用相应的回调函数。
如果 then 方法返回一个新的 Promise，则将新 Promise 的状态与原 Promise 的状态关联起来。

示例代码

以下代码展示了一个简单的 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((value) => {
          setTimeout(() => {
            try {
              const result = onFulfilled(value);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
        this.onRejectedCallbacks.push((reason) => {
          setTimeout(() => {
            try {
              const result = onRejected(reason);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
      }
    });
  }
}