手写Promise，原理原来如此！

前端

2023-09-20 18:18:41

准备开始一场激动人心的旅程，我们将揭开Promise的神秘面纱，以一种你从未想过的通俗易懂的方式。当你完成阅读时，你一定会觉得自己掌握了Promise的精髓，自信满满地手写自己的Promise。

一、深入理解Promise

Promise，一个异步编程的利器，解决了回调地狱的困扰，带来了代码书写的简洁性。它本质上是一种微任务，巧妙地协调着异步操作，让我们能够以一种更优雅的方式处理异步代码。

二、Promise的三个状态

Promise有三个关键状态，分别为：

pending（等待）： 初始状态，表示异步操作尚未完成。
fulfilled（成功）： 异步操作执行成功，带有成功结果。
rejected（失败）： 异步操作执行失败，带有失败原因。

三、创建自己的Promise

现在，让我们动手创建一个自己的Promise。代码如下：

function createPromise(executor) {
  let state = 'pending'; // 初始状态
  let result; // 成功结果或失败原因

  // executor函数立即执行，有两个参数resolve和reject
  executor(resolve, reject);

  function resolve(value) {
    if (state !== 'pending') return; // 状态只能从pending转变
    state = 'fulfilled';
    result = value;
  }

  function reject(error) {
    if (state !== 'pending') return; // 状态只能从pending转变
    state = 'rejected';
    result = error;
  }

  return {
    then: function(onFulfilled, onRejected) {
      // 省略then的具体实现
    },
    catch: function(onRejected) {
      // 省略catch的具体实现
    }
  };
}

四、Promise的then和catch

then和catch是Promise的两个重要方法：

then： 当Promise状态变为fulfilled时执行，接收一个回调函数作为参数，该函数处理成功的结果。
catch： 当Promise状态变为rejected时执行，接收一个回调函数作为参数，该函数处理失败的原因。

五、示例：手写Promise

下面是一个手写Promise的示例：

const promise = createPromise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功的结果'); // 2秒后成功
  }, 2000);
});

promise.then(result => {
  console.log(result); // 输出：成功的结果
});