Promise 模拟实现：200行解读，纵览并发编程精髓

前端

2023-11-28 22:38:14

剖析 Promise 模拟实现，掌握异步编程精髓

在现代 Web 开发中，异步编程和并发编程已成为重中之重。Promise 作为一种强大的异步编程工具，在处理异步操作方面表现出色。本文将以 200 行代码逐行解析 Promise 的模拟实现，带领你深入理解其工作原理和并发编程的奥秘。

什么是 Promise

Promise 是一个对象，代表着一个异步操作的最终完成或失败结果。它提供了简洁而高效的 API，用于处理异步操作，让开发者能够轻松编写异步代码。

Promise 的状态

Promise 有三种状态：

Pending： 初始状态，表示异步操作尚未完成。
Fulfilled： 成功状态，表示异步操作已成功完成，并有结果返回。
Rejected： 失败状态，表示异步操作已失败，并有错误信息返回。

Promise 的方法

Promise 提供了两个主要方法：

then： 用于注册回调函数，当 Promise 状态发生变化时，回调函数会被调用。
catch： 用于注册错误处理函数，当 Promise 状态变为 Rejected 时，错误处理函数会被调用。

Promise 模拟实现剖析

下面我们逐行解读 Promise 的模拟实现，以便更好地理解其运作机制。

class Promise {
  constructor(executor) {
    this.state = 'pending';
    this.result = undefined;
    this.error = 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 = (error) => {
      if (this.state !== 'pending') return;

      this.state = 'rejected';
      this.error = error;

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

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

  then(onFulfilled, onRejected) {
    if (this.state === 'fulfilled') {
      onFulfilled(this.result);
    } else if (this.state === 'rejected') {
      onRejected(this.error);
    } else {
      this.onFulfilledCallbacks.push(onFulfilled);
      this.onRejectedCallbacks.push(onRejected);
    }

    return this;
  }

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