巧用Promise，JavaScript异步编程更轻松

Promise，一个强大的JavaScript工具，让异步编程变得更加简单。本文将深入剖析Promise的实现过程，带你领略它的魅力。

Promise的实现可以分为几个步骤：

1. 定义整体结构

function Promise(executor) {
  // 初始化状态
  this.status = 'pending';
  // 保存结果
  this.value = undefined;
  // 保存错误信息
  this.error = undefined;
  // 保存then回调队列
  this.thenCallbacks = [];
  // 保存catch回调队列
  this.catchCallbacks = [];

  // 执行器函数
  try {
    executor(resolve.bind(this), reject.bind(this));
  } catch (err) {
    reject.call(this, err);
  }
}

2. Promise构造函数的实现

// 成功回调函数
function resolve(value) {
  if (this.status !== 'pending') return;
  this.status = 'fulfilled';
  this.value = value;
  this.thenCallbacks.forEach((callback) => callback(value));
}

// 失败回调函数
function reject(error) {
  if (this.status !== 'pending') return;
  this.status = 'rejected';
  this.error = error;
  this.catchCallbacks.forEach((callback) => callback(error));
}

3. then方法的实现

Promise.prototype.then = function (onFulfilled, onRejected) {
  // 如果没有传入成功回调，使用默认回调
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (value) => value;
  // 如果没有传入失败回调，使用默认回调
  onRejected = typeof onRejected === 'function' ? onRejected : (error) => { throw error; };

  // 返回新的Promise对象
  return new Promise((resolve, reject) => {
    // 根据状态执行不同的回调
    if (this.status === 'fulfilled') {
      setTimeout(() => {
        try {
          const result = onFulfilled(this.value);
          resolve(result);
        } catch (err) {
          reject(err);
        }
      }, 0);
    } else if (this.status === 'rejected') {
      setTimeout(() => {
        try {
          const result = onRejected(this.error);
          resolve(result);
        } catch (err) {
          reject(err);
        }
      }, 0);
    } else {
      // 如果状态仍为pending，将回调加入队列
      this.thenCallbacks.push(onFulfilled);
      this.catchCallbacks.push(onRejected);
    }
  });
};

4. catch方法的实现

Promise.prototype.catch = function (onRejected) {
  return this.then(null, onRejected);
};

5. Promise.resolve方法的实现

Promise.resolve = function (value) {
  return new Promise((resolve) => {
    resolve(value);
  });
};

通过这些步骤，我们可以理解Promise内部的实现机制。掌握这些知识后，你就能更加熟练地运用Promise，让你的异步代码更加优雅和可控。