从零构建 Promise：全面解析 Promise 的工作原理与应用

前端

2023-11-14 21:59:04

理解 Promise：从头开始实现

在现代网络开发中，异步编程变得至关重要。Promise 作为一种处理异步操作的有效方式，为我们的代码带来了可读性、可维护性和可扩展性。让我们深入了解 Promise，从头开始实现一个，并探讨其在异步编程中的重要性。

实现 Promise

1. 定义 Promise 构造函数

Promise 构造函数接收一个函数作为参数，称为执行器。执行器函数负责执行异步操作。

2. 在执行器中处理异步操作

在执行器中，执行异步操作。完成后，调用 resolve 或 reject 函数改变 Promise 的状态。

3. 返回 Promise 实例

Promise 构造函数返回一个 Promise 实例，该实例包含状态（pending、fulfilled 或 rejected）、结果和回调队列。

示例代码：

function Promise(executor) {
  let state = 'pending';
  let result;
  let onFulfilledCallbacks = [];
  let onRejectedCallbacks = [];

  function resolve(value) {
    if (state !== 'pending') return;
    state = 'fulfilled';
    result = value;
    onFulfilledCallbacks.forEach((callback) => callback(result));
  }

  function reject(error) {
    if (state !== 'pending') return;
    state = 'rejected';
    result = error;
    onRejectedCallbacks.forEach((callback) => callback(result));
  }

  executor(resolve, reject);
}

Promise 的用法

1. 创建 Promise 实例

使用 new Promise 语法创建 Promise 实例。执行器函数负责执行异步操作。

2. 使用 then 方法添加回调

then 方法接收两个回调函数，分别用于在 Promise 状态变为 fulfilled 和 rejected 时执行。

示例代码：

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

promise.then((result) => {
  console.log(result); // 输出：成功
}, (error) => {
  console.log(error);
});