手写Promise，不再畏惧面试，详尽剖析背后的原理与实现

2023-12-29 03:20:18

前言

在当今快节奏的互联网时代，异步编程已成为软件开发中不可或缺的一部分。它使我们能够处理大量并发请求，提高应用程序的响应速度和性能。JavaScript作为一种流行的编程语言，提供了Promise对象，它使异步编程变得更加简单和可控。然而，手写Promise是一项富有挑战性的任务，需要对JavaScript的运行机制和事件循环有深入的理解。

什么是Promise？

Promise是一个对象，它代表着异步操作的最终完成或失败的结果。它提供了一种机制，允许我们跟踪异步操作的进展并相应地做出处理。Promise有三种状态：等待（pending）、已完成（fulfilled）和已拒绝（rejected）。当异步操作成功完成时，Promise会转为已完成状态，并携带一个值。当异步操作失败时，Promise会转为已拒绝状态，并携带一个错误对象。

手写Promise的原理

为了手写Promise，我们需要模拟Promise对象的行为，包括创建Promise、解析Promise和使用Promise。

创建Promise时，我们需要传入一个执行器函数。执行器函数有两个参数，分别是resolve和reject。resolve用于在异步操作成功完成时解析Promise，reject用于在异步操作失败时拒绝Promise。

解析Promise时，我们需要将Promise的状态从等待转为已完成，并将异步操作的结果作为参数传递给resolve函数。

拒绝Promise时，我们需要将Promise的状态从等待转为已拒绝，并将错误对象作为参数传递给reject函数。

手写Promise的实现

function Promise(executor) {
  this.state = 'pending'; // 初始状态为等待
  this.value = undefined; // 存储成功的结果
  this.reason = undefined; // 存储失败的原因
  this.onFulfilledCallbacks = []; // 存储成功回调函数
  this.onRejectedCallbacks = []; // 存储失败回调函数

  const resolve = (value) => {
    if (this.state !== 'pending') return; // 状态已改变，忽略
    this.state = 'fulfilled'; // 将状态改为已完成
    this.value = value; // 存储成功结果
    this.onFulfilledCallbacks.forEach(callback => callback(value)); // 执行成功回调函数
  };

  const reject = (reason) => {
    if (this.state !== 'pending') return; // 状态已改变，忽略
    this.state = 'rejected'; // 将状态改为已拒绝
    this.reason = reason; // 存储失败原因
    this.onRejectedCallbacks.forEach(callback => callback(reason)); // 执行失败回调函数
  };

  executor(resolve, reject); // 立即执行执行器函数
}

Promise.prototype.then = function(onFulfilled, onRejected) {
  // 返回一个新的Promise对象
  return new Promise((resolve, reject) => {
    // 将成功回调函数添加到成功回调函数数组中
    this.onFulfilledCallbacks.push(() => {
      // 在成功回调函数中，调用新的Promise对象的resolve函数，并将结果作为参数传递
      resolve(onFulfilled(this.value));
    });

    // 将失败回调函数添加到失败回调函数数组中
    this.onRejectedCallbacks.push(() => {
      // 在失败回调函数中，调用新的Promise对象的reject函数，并将错误对象作为参数传递
      reject(onRejected(this.reason));
    });
  });
};

使用手写Promise

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

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