揭秘 Promise 源码，轻松掌握异步编程利器

2023-10-24 21:36:03

Promise 深入浅出：从源码到实践

在 JavaScript 的异步编程世界中，Promise 闪耀着璀璨的光芒。它像是一位优雅的管家，为我们处理异步任务，让代码变得井然有序，易于维护。为了更深入地理解 Promise，我们不妨来一场源码之旅，亲手构建 Promise 的奥秘。

什么是 Promise

Promise 是一个 构造函数 ，用来封装一个异步操作，并提供一个等待其结果的手段。它拥有三个状态：等待中 、已完成 和 已拒绝 。

处理 Promise 结果

处理 Promise 结果有两种方法：then 和 catch 。then 用于处理成功状态，catch 用于处理失败状态。

构建 Promise 源码

要构建 Promise 源码，我们从构造函数开始：

function Promise(executor) {
  this.state = 'pending';
  this.result = undefined;
  this.onFulfilledCallbacks = [];
  this.onRejectedCallbacks = [];

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

  const reject = (error) => {
    if (this.state !== 'pending') {
      return;
    }
    this.state = 'rejected';
    this.result = error;
    this.onRejectedCallbacks.forEach((callback) => {
      callback(error);
    });
  };

  executor(resolve, reject);
}

executor 函数负责执行异步操作，resolve 和 reject 分别处理成功和失败。

then 和 catch 方法

接下来，我们定义 then 和 catch 方法：

Promise.prototype.then = function(onFulfilled, onRejected) {
  return new Promise((resolve, reject) => {
    this.onFulfilledCallbacks.push(() => {
      try {
        const result = onFulfilled(this.result);
        resolve(result);
      } catch (error) {
        reject(error);
      }
    });

    this.onRejectedCallbacks.push(() => {
      try {
        const error = onRejected(this.result);
        reject(error);
      } catch (error) {
        reject(error);
      }
    });
  });
};

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

then 方法创建了一个新的 Promise，并执行 onFulfilled 和 onRejected 回调。catch 方法只是 then 的语法糖，可以简化错误处理。

使用 Promise

有了 Promise 源码，我们就可以开始使用了：

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

promise.then((result) => {
  console.log(result); // 输出：成功
}).catch((error) => {
  console.log(error); // 不会被执行
});