手写 Promise 揭秘：核心概念和流程

前端

2023-12-28 11:38:43

Promise：巧妙处理异步世界的超级英雄

在 JavaScript 的广阔宇宙中，异步操作就像顽皮的星星，以其不可预测的方式闪烁着。但是，不要害怕，朋友们！Promise 就像一位超级英雄，它将混乱驯服，使异步编程变得轻而易举。

认识 Promise 的核心概念

Promise 是 JavaScript 中一种强大的机制，用于处理异步操作。它拥有三个关键概念，就像超级英雄的三位一体：

1. 状态：从悬而未决到实现

Promise 拥有三种状态：悬而未决、已实现和已拒绝。悬而未决表示操作正在进行中，已实现表示操作已成功完成，而已拒绝则表示操作失败了。

2. then：当事情按计划进行时

then 方法就像 Promise 的秘密武器，当操作已实现时就会调用它。它接受两个参数：onFulfilled 和 onRejected。onFulfilled 是操作成功时的回调函数，而 onRejected 是操作失败时的回调函数。

3. catch：当事情出岔子时

catch 方法是 onRejected 的更直接版本。它只接受一个参数，即 onRejected，并在操作失败时执行。

Promise 的流程：从诞生到结束

Promise 的生命周期就像一场史诗般的旅程：

创建： 你实例化一个 Promise 对象，就像建造一座堡垒。
传递： 你将 Promise 对象传递给一个异步操作，就像派出一支军队。
状态变更： 当异步操作完成时，Promise 对象的状态会根据结果变为已实现或已拒绝，就像胜利或失败的战报。
回调调用： 如果 Promise 已实现，则调用 then 方法的 onFulfilled 回调函数，就像庆祝胜利的盛宴。如果 Promise 已拒绝，则调用 then 方法的 onRejected 回调函数或 catch 方法的 onRejected 回调函数，就像处理失败的伤痛。

使用 Promise 的范例：控制异步的狂野

让我们用一个代码示例来说明 Promise 的强大功能：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("任务完成！"); // 任务成功，状态变为已实现
  }, 2000);
});

promise.then((result) => {
  console.log(result); // 输出：任务完成！
}).catch((error) => {
  console.error(error); // 输出：任务失败！
});