Promise 手撕之旅：解剖异步编程的基石

前端

2023-12-21 16:17:53

前言

在现代 Web 开发中，异步编程已成为不可或缺的一部分。它允许应用程序在不阻塞主线程的情况下执行长时间或 I/O 密集型任务，从而保持界面响应性。而 Promise 作为 JavaScript 中异步编程的基石，扮演着至关重要的角色。

什么是 Promise？

Promise 是一个对象，它代表了一个异步操作的最终结果。它具有三个状态：pending（未决）、fulfilled（已完成）和 rejected（已拒绝）。

手动实现 Promise

手动实现一个完整的 Promise 是一个复杂的任务，涉及到以下关键步骤：

1. 状态管理：

跟踪 Promise 的当前状态，并根据需要更新状态。

2. 回调处理：

为 Promise 注册回调函数，以便在状态改变时执行。

3. then() 方法：

返回一个新的 Promise，该 Promise 将在原 Promise 完成后执行。

4. catch() 方法：

返回一个新的 Promise，该 Promise 将在原 Promise 被拒绝后执行。

简化版 Promise 实现

为了理解 Promise 的基本原理，我们创建一个简化的 Promise 实现：

class Promise {
  constructor(executor) {
    this.state = 'pending';
    this.result = undefined;
    this.callbacks = [];

    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.result = value;

    for (const callback of this.callbacks) {
      callback.onFulfilled(value);
    }
  }

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

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

    for (const callback of this.callbacks) {
      callback.onRejected(error);
    }
  }

  then(onFulfilled, onRejected) {
    return new Promise((resolve, reject) => {
      this.callbacks.push({ onFulfilled, onRejected, resolve, reject });
    });
  }
}

使用简化版 Promise

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

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