深入浅出解读Promise 类核心逻辑，手把手教你手写 Promise

2023-11-10 07:00:26

在当今 JavaScript 生态系统中，Promise 是一个必不可少的工具，它能够帮助我们管理异步操作，让我们的代码更加易读和易于维护。但你是否真正理解 Promise 的底层原理呢？在本文中，我们将深入浅出地解读 Promise 类的核心逻辑，并手把手教你如何手写一个简单的 Promise 类。

Promise 类的核心逻辑

Promise 类的核心逻辑非常简单，它主要由以下几个部分组成：

状态：Promise 可以处于三种状态之一：等待（pending） 、已完成（fulfilled） 或已拒绝（rejected） 。
值：Promise 可以存储一个值，这个值可以是任何类型的数据。
回调函数：Promise 可以注册两个回调函数，分别是成功回调函数（resolve） 和失败回调函数（reject） 。当 Promise 的状态发生变化时，这两个回调函数就会被调用。

如何手写一个 Promise 类

现在，让我们一步一步地手把手教你如何手写一个简单的 Promise 类：

定义 Promise 类：

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

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

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

    this.state = 'fulfilled';
    this.value = value;

    this.onFulfilledCallbacks.forEach(callback => callback(this.value));
  }

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

    this.state = 'rejected';
    this.reason = reason;

    this.onRejectedCallbacks.forEach(callback => callback(this.reason));
  }

  then(onFulfilled, onRejected) {
    return new Promise((resolve, reject) => {
      this.onFulfilledCallbacks.push(() => {
        try {
          const result = onFulfilled(this.value);
          resolve(result);
        } catch (error) {
          reject(error);
        }
      });

      this.onRejectedCallbacks.push(() => {
        try {
          const result = onRejected(this.reason);
          resolve(result);
        } catch (error) {
          reject(error);
        }
      });
    });
  }

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

使用 Promise 类：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, world!');
  }, 1000);
});

promise.then(value => {
  console.log(value); // 输出: Hello, world!
});