深入剖析打造符合Promises/A+规范的Promise, 亲自动手实践！

前端

2023-09-11 09:10:17

大家好，我们今天要从头开始构建一个符合Promises/A+规范的Promise。这是一个很好的学习机会，可以让我们深入了解Promise的实现原理，同时还能加强对异步编程的认识。

什么是Promise？

Promise是一个异步编程的解决方案，它比传统的回调函数和事件更合理、更强大。简单来说，Promise是一个对象，它代表着某个异步操作的最终完成或失败的结果。我们可以通过then方法来监听这个异步操作的结果，并执行相应的回调函数。

Promises/A+规范

Promises/A+规范是一个通用的Promise规范，它定义了Promise对象必须遵守的行为。这个规范由社区最早提出和实现，后来ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。

如何构建一个Promise

现在，我们来一步步地构建一个符合Promises/A+规范的Promise。

定义Promise对象

首先，我们需要定义一个Promise对象。Promise对象是一个构造函数，它接受一个函数作为参数，这个函数称为执行器函数。执行器函数有两个参数，分别是resolve和reject，这两个函数用于分别表示异步操作成功和失败的情况。

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

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

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

  executor(resolve, reject);
}

实现then方法

接下来，我们需要实现then方法。then方法接受两个函数作为参数，分别是onFulfilled和onRejected，这两个函数分别用于处理异步操作成功和失败的情况。

Promise.prototype.then = function(onFulfilled, onRejected) {
  if (typeof onFulfilled !== 'function') {
    onFulfilled = (value) => value;
  }

  if (typeof onRejected !== 'function') {
    onRejected = (reason) => { throw reason; };
  }

  let promise2 = new Promise((resolve, reject) => {
    if (this.state === 'fulfilled') {
      setTimeout(() => {
        try {
          let x = onFulfilled(this.value);
          resolvePromise(promise2, x, resolve, reject);
        } catch (e) {
          reject(e);
        }
      }, 0);
    }

    if (this.state === 'rejected') {
      setTimeout(() => {
        try {
          let x = onRejected(this.reason);
          resolvePromise(promise2, x, resolve, reject);
        } catch (e) {
          reject(e);
        }
      }, 0);
    }

    if (this.state === 'pending') {
      this.onFulfilledCallbacks.push(() => {
        setTimeout(() => {
          try {
            let x = onFulfilled(this.value);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      });

      this.onRejectedCallbacks.push(() => {
        setTimeout(() => {
          try {
            let x = onRejected(this.reason);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      });
    }
  });

  return promise2;
};

实现resolvePromise方法

最后，我们需要实现resolvePromise方法。resolvePromise方法用于处理异步操作成功或失败的情况。

function resolvePromise(promise2, x, resolve, reject) {
  if (promise2 === x) {
    reject(new TypeError('Chaining cycle detected'));
  }

  if (x instanceof Promise) {
    x.then((value) => {
      resolvePromise(promise2, value, resolve, reject);
    }, (reason) => {
      reject(reason);
    });
  } else if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
    try {
      let then = x.then;
      if (typeof then === 'function') {
        then.call(x, (y) => {
          resolvePromise(promise2, y, resolve, reject);
        }, (r) => {
          reject(r);
        });
      } else {
        resolve(x);
      }
    } catch (e) {
      reject(e);
    }
  } else {
    resolve(x);
  }
}