Promise 源代码分享 | ES5 与 ES6 实现详解

2023-12-02 14:33:06

前言

在当今软件开发领域，异步编程已成为不可或缺的一部分。它使我们能够处理复杂的任务，而不会阻塞主线程，从而提高程序的响应速度。而 Promise 作为 JavaScript 中的异步编程解决方案，以其简单易用和强大的功能而备受青睐。

Promise 源码解读

为了更好地理解 Promise 的工作原理，我们不妨从它的源码入手。在 ES5 中，Promise 的实现主要基于构造函数，而在 ES6 中则采用了 class。

ES5 构造函数实现

在 ES5 中，Promise 的构造函数接受一个执行器函数作为参数，该函数包含两个参数：resolve 和 reject。这两个参数都是函数，分别用于表示 Promise 的成功和失败。

function Promise(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(value));
  };

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

  executor(resolve, reject);
}

ES6 class 实现

在 ES6 中，Promise 的实现采用了 class。它的语法与 ES5 类似，但更加简洁和易读。

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(value));
    };

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

    executor(resolve, reject);
  }
}