揭秘Promise的神秘面纱——从头编写一个基于Promise/A+规范的实现

前端

2023-10-28 20:18:18

前言

大家好，我是[你的名字]，一名技术博客创作专家。今天，我将带你走进Promise的世界，手把手教你创建一个基于Promise/A+规范的Promise实现。这个过程，将不仅是学习Promise，更是对编程的一次实践。

什么是Promise？

在开始之前，我们先来了解一下Promise。Promise是JavaScript中用来处理异步操作的利器，它可以让我们更加优雅地编写异步代码，从而让代码更具可读性和可维护性。

Promise/A+规范

Promise/A+规范是Promise的一个标准，它定义了Promise的基本行为和实现方式。所有遵循Promise/A+规范的Promise实现，都具有相同的行为和接口。

实现一个Promise

现在，让我们开始实现一个Promise。首先，我们需要定义一个Promise构造函数，它接受一个参数executor，executor是一个函数，它有两个参数resolve和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);
}

接下来，我们需要定义then方法，then方法接受两个参数onFulfilled和onRejected，这两个参数都是函数，它们分别用于处理Promise被解决和拒绝的情况。

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

    this.onRejectedCallbacks.push(() => {
      try {
        const result = onRejected(this.reason);
        if (result instanceof Promise) {
          result.then(resolve, reject);
        } else {
          resolve(result);
        }
      } catch (error) {
        reject(error);
      }
    });
  });
};

最后，我们需要定义catch方法，catch方法接受一个参数onRejected，这个参数是一个函数，用于处理Promise被拒绝的情况。

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

使用Promise

现在，我们已经实现了一个Promise，那么我们就可以使用它来编写异步代码了。下面是一个简单的例子：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, world!');
  }, 1000);
});

promise.then((value) => {
  console.log(value); // Hello, world!
});