规范化实现Promise

2023-11-10 18:16:21

前言

Promise是JavaScript中用于处理异步编程的内置对象，它提供了一种简单且有效的方式来处理异步操作。它可以使代码更加易读和可维护，同时也可以减少回调函数的嵌套。

Promise构造函数和状态声明

Promise是一个构造函数，它接受一个执行器函数作为参数。执行器函数有两个参数，分别是resolve和reject，它们用于将Promise从pending状态变为fulfilled或rejected状态。

Promise有三种状态：pending、fulfilled和rejected。pending表示Promise尚未完成，fulfilled表示Promise已成功完成，rejected表示Promise已失败。

resolve和reject方法

resolve方法用于将Promise从pending状态变为fulfilled状态，它接受一个参数，表示Promise成功完成后的结果。reject方法用于将Promise从pending状态变为rejected状态，它接受一个参数，表示Promise失败后的原因。

then方法的实现

then方法用于在Promise完成时执行指定的回调函数。它接受两个参数，分别是onFulfilled和onRejected，它们分别用于在Promise成功完成和失败时执行的回调函数。

onFulfilled回调函数接受一个参数，表示Promise成功完成后的结果。onRejected回调函数接受一个参数，表示Promise失败后的原因。

如何使用Promise进行异步编程

要使用Promise进行异步编程，首先需要创建一个Promise对象。然后，在异步操作完成时，使用resolve或reject方法将Promise的状态从pending变为fulfilled或rejected。最后，使用then方法指定在Promise完成时执行的回调函数。

规范化实现Promise

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

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

    const reject = (reason) => {
      if (this.state !== 'pending') return;
      this.state = 'rejected';
      this.result = 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.result);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else if (this.state === 'rejected') {
        setTimeout(() => {
          try {
            const result = onRejected(this.result);
            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.result);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
      }
    });
  }
}