深入浅出：从头实现Promise库，解锁异步编程新世界

前端

2023-11-12 11:39:02

前言：异步编程的必要性

在当今快节奏的世界中，异步编程已成为软件开发的基石。它使我们能够在不阻塞主线程的情况下执行耗时的任务，从而提高应用程序的响应能力和性能。而作为异步编程的利器，Promise 库在现代 JavaScript 开发中扮演着不可或缺的角色。

理解Promise的基本概念

Promise，顾名思义，是一种表示异步操作最终完成或失败的承诺。它提供了一种机制，让我们可以将异步操作的结果传递给后续操作，从而实现代码的串行化和并行化。

Promise 的状态可以分为三种：

Pending： 表示异步操作尚未完成，处于等待状态。
Fulfilled： 表示异步操作已成功完成，并带有结果值。
Rejected： 表示异步操作已失败，并带有错误信息。

构建一个简单的Promise库

为了更深入地理解 Promise 的工作原理，我们从头开始构建一个简单的 Promise 库。

// 定义Promise类
class Promise {
  constructor(executor) {
    this.state = 'pending'; // 初始状态为pending
    this.result = undefined; // 结果值
    this.onFulfilledCallbacks = []; // 保存then()的成功回调函数
    this.onRejectedCallbacks = []; // 保存then()的失败回调函数

    // 立即执行executor函数，并传入resolve和reject两个回调函数
    executor(this.resolve.bind(this), this.reject.bind(this));
  }

  // 成功回调函数
  resolve(value) {
    if (this.state !== 'pending') return;

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

    // 依次调用then()注册的成功回调函数
    this.onFulfilledCallbacks.forEach(callback => callback(this.result));
  }

  // 失败回调函数
  reject(error) {
    if (this.state !== 'pending') return;

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

    // 依次调用then()注册的失败回调函数
    this.onRejectedCallbacks.forEach(callback => callback(this.result));
  }

  // then()方法
  then(onFulfilled, onRejected) {
    // 如果没有传入回调函数，则直接返回一个新的Promise对象
    if (typeof onFulfilled !== 'function') {
      onFulfilled = value => value;
    }

    if (typeof onRejected !== 'function') {
      onRejected = error => { throw error; };
    }

    // 创建一个新的Promise对象
    const newPromise = new Promise((resolve, reject) => {
      // 将当前Promise的状态改变时，根据状态调用对应的回调函数
      if (this.state === 'fulfilled') {
        try {
          const result = onFulfilled(this.result);
          resolve(result);
        } catch (error) {
          reject(error);
        }
      } else if (this.state === 'rejected') {
        try {
          const result = onRejected(this.result);
          resolve(result);
        } catch (error) {
          reject(error);
        }
      } else { // 如果当前状态为pending，将回调函数存储起来
        this.onFulfilledCallbacks.push(() => {
          try {
            const result = onFulfilled(this.result);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        });

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

    // 返回新的Promise对象
    return newPromise;
  }

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

Promise的使用方法

使用我们构建的 Promise 库非常简单，下面是一个示例：

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

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