程序员视角，Promise 的前世今生

前端

2023-10-19 19:47:15

好的，这是关于“手撕 Promise”的文章：

手撕 Promise

在 JavaScript 中，Promise 是一个强大的工具，可以帮助我们处理异步操作。它提供了一种简洁的方式来处理异步操作的结果，并使我们的代码更加容易理解和维护。

如果想深入了解 Promise 的内部实现，最好的方法之一就是自己动手实现它。本文将带领你一步一步地手撕 Promise，从原理到应用，让你全面理解 Promise 的前世今生。

Promise 的三种状态

Promise 有三种状态：

待定（pending）：这是 Promise 的初始状态。它表示异步操作尚未完成。
已完成（fulfilled）：这是 Promise 的成功状态。它表示异步操作已成功完成，并返回了一个值。
已拒绝（rejected）：这是 Promise 的失败状态。它表示异步操作已失败，并返回了一个错误对象。

Promise 的实现

我们可以使用以下代码来实现 Promise：

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

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

    const reject = (error) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.error = error;
        this.onRejectedCallbacks.forEach((callback) => {
          callback(error);
        });
      }
    };

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

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

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

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