穿越 Promise 神秘国度，揭开编程大幕！

2023-11-22 15:52:43

探索 JavaScript 中 Promise 的神奇世界：揭开异步编程的秘密

在 JavaScript 的广阔天地中，异步编程如同奔腾不息的河流，帮助我们应对现代 Web 开发中的各种挑战。而 Promise，就像一颗璀璨的明珠，照亮了异步编程的道路，让我们轻松驾驭这股潮流。今天，我们将踏上这段奇妙的旅程，揭开 Promise 的神秘面纱，深入理解其实现原理，并领略它在实际开发中的强大魅力。

Promise：异步编程的救星

在前端开发的舞台上，异步操作扮演着至关重要的角色。从 AJAX 请求到定时器，再到事件监听器，我们无时无刻不在与异步代码打交道。然而，如果没有 Promise 的保驾护航，异步编程可能会变成一场回调地狱的噩梦，代码结构混乱不堪，可读性荡然无存。

Promise 的工作原理：拨开迷雾见青天

要熟练掌握 Promise，我们必须深入其内部运作机制。Promise 的核心是一个状态机，可以处于三种状态：Pending（等待）、Fulfilled（完成）和 Rejected（拒绝）。刚创建的 Promise 处于 Pending 状态，当异步操作完成后，它会根据结果进入 Fulfilled 或 Rejected 状态。

回调函数：Promise 的左右手

回调函数是 Promise 的忠实伙伴，在 Promise 状态发生改变时，它们会应声而出。我们在创建 Promise 时传入一个函数，该函数接收 resolve 和 reject 两个参数，分别用于异步操作成功和失败时的处理。

微任务队列与宏任务队列：幕后的推手

在 JavaScript 中，有两个关键的队列：微任务队列和宏任务队列。Promise 状态发生改变时，会将回调函数推入微任务队列，而宏任务队列则包含 setTimeout、setInterval 等宏任务。微任务队列享有优先权，会在宏任务队列之前执行，保证了 Promise 回调函数的及时响应。

动手实现一个 Promise：从理论到实践

纸上谈兵终觉浅，让我们亲自实现一个简化的 Promise，加深对它的理解。

class Promise {
  constructor(executor) {
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onFulfilledCallbacks.forEach((callback) => callback());
      }
    };

    const reject = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        this.onRejectedCallbacks.forEach((callback) => callback());
      }
    };

    try {
      executor(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }

  then(onFulfilled, onRejected) {
    if (this.state === 'pending') {
      this.onFulfilledCallbacks.push(onFulfilled);
      this.onRejectedCallbacks.push(onRejected);
    } else if (this.state === 'fulfilled') {
      onFulfilled(this.value);
    } else if (this.state === 'rejected') {
      onRejected(this.reason);
    }
  }

  catch(onRejected) {
    return this.then(null, onRejected);
  }
}