JS核心：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(this.value));
    };

    const reject = (reason) => {
      if (this.state !== 'pending') return;
      this.state = 'rejected';
      this.reason = reason;
      this.onRejectedCallbacks.forEach((callback) => callback(this.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) => {
        onFinally();
        return value;
      },
      (reason) => {
        onFinally();
        throw reason;
      }
    );
  }
}

Promise的工作原理

Promise对象具有三个状态：pending（等待）、fulfilled（已完成）和rejected（已拒绝）。当Promise处于pending状态时，意味着异步操作仍在进行中；当异步操作成功完成时，Promise会变为fulfilled状态，此时可以访问Promise的值；当异步操作失败时，Promise会变为rejected状态，此时可以访问Promise的错误原因。

我们可以使用then方法来监听Promise的状态变化。当Promise变为fulfilled状态时，then方法的第一个参数会被调用，并传入Promise的值；当Promise变为rejected状态时，then方法的第二个参数会被调用，并传入Promise的错误原因。

Promise还提供了catch方法，它可以简化错误处理。catch方法实际上是then方法的语法糖，它只接受一个参数，该参数是一个函数，用于处理Promise的错误原因。

最后，Promise还提供了finally方法，无论Promise最终是成功还是失败，finally方法中的函数都会被调用。finally方法经常被用于清理资源或执行一些无关紧要的操作。

结论

Promise是一种非常有用的工具，它可以帮助我们编写更易于理解和维护的异步代码。通过本文，您已经了解了Promise的基本概念、实现原理以及如何使用Promise来编写异步代码。希望您能够在未来的项目中灵活运用Promise，编写出更加出色的代码。