揭秘Promise的内部机制：手把手教你亲手打造异步利器

2023-09-22 13:22:00

导语

异步是JavaScript开发中绕不过去的一块难啃的骨头，它带来的回调地狱曾让无数开发者深受其害。作为一名致力于提供一站式解决方案的博主，今天，我就来为你揭秘Promise的内部机制，手把手教你亲手打造自己的异步利器，彻底告别回调地狱的噩梦。

从0到1：理解Promise

在开始之前，我们不妨先简单回顾一下Promise。它本质上是一个对象，用于表示一个异步操作的最终完成或失败状态。通过使用Promise，我们可以将异步操作的处理逻辑组织得更加清晰，避免陷入回调地狱的泥潭。

手写Promise：从无到有

接下来，我们就来一步步实现一个Promise的简易版本。

首先，我们定义一个Promise构造函数，它接收一个executor函数作为参数：

function MyPromise(executor) {
  this.status = 'pending'; // 初始状态为等待中
  this.value = undefined; // 结果值
  this.reason = undefined; // 失败原因
  this.onFulfilledCallbacks = []; // 成功回调函数队列
  this.onRejectedCallbacks = []; // 失败回调函数队列

  try {
    // 立即执行executor函数，并将resolve和reject函数传入
    executor(resolve.bind(this), reject.bind(this));
  } catch (error) {
    reject.call(this, error); // 如果executor函数抛出错误，直接调用reject
  }
}

resolve和reject：改变Promise状态

在executor函数中，我们可以调用resolve函数来表示异步操作成功完成，也可以调用reject函数来表示操作失败：

// 成功
function resolve(value) {
  if (this.status === 'pending') {
    this.status = 'resolved';
    this.value = value;
    this.onFulfilledCallbacks.forEach(cb => cb(value)); // 依次调用成功回调函数
  }
}

// 失败
function reject(reason) {
  if (this.status === 'pending') {
    this.status = 'rejected';
    this.reason = reason;
    this.onRejectedCallbacks.forEach(cb => cb(reason)); // 依次调用失败回调函数
  }
}

then方法：监听Promise状态变化

一旦Promise状态发生变化，我们可以使用then方法来监听状态变化并执行相应的回调函数：

MyPromise.prototype.then = function(onFulfilled, onRejected) {
  if (this.status === 'resolved') {
    onFulfilled(this.value); // 立即执行成功回调函数
  } else if (this.status === 'rejected') {
    onRejected(this.reason); // 立即执行失败回调函数
  } else {
    // 如果Promise状态还是等待中，则将回调函数推入队列中，等待状态变化后执行
    this.onFulfilledCallbacks.push(onFulfilled);
    this.onRejectedCallbacks.push(onRejected);
  }

  return this; // 返回Promise对象，支持链式调用
};

实践案例：手写Promise in Action

现在，我们已经拥有了自己的简易Promise，是时候用它来解决一些实际问题了。例如，我们可以用它来获取服务器上的数据：

const promise = new MyPromise((resolve, reject) => {
  // 模拟异步获取服务器数据
  setTimeout(() => {
    if (Math.random() > 0.5) {
      resolve('成功获取数据');
    } else {
      reject('获取数据失败');
    }
  }, 1000);
});

promise.then(
  data => {
    console.log(data); // 成功获取数据
  },
  error => {
    console.log(error); // 获取数据失败
  }
);