在A+规范的指引下打造Promise

前端

2024-01-29 07:00:39

一、Promise简介

Promise是一种用来处理异步操作的强大工具。它可以将异步操作的结果包装成一个对象，从而使我们能够在该异步操作完成后继续执行我们的代码。Promise具有以下几个特点：

Promise是一个对象，表示一个异步操作的结果。
Promise有三种状态：pending（等待）、resolved（已完成）、rejected（已拒绝）。
Promise一旦被创建，状态就不会改变。
Promise的then()方法可以用来监听Promise的状态变化。
Promise的catch()方法可以用来处理Promise被rejected的情况。

二、A+规范

A+规范是Promise的规范。它定义了Promise的标准行为，确保Promise在不同的环境和浏览器中具有相同的功能。

A+规范的主要内容包括：

Promise的状态只能是pending、resolved或rejected三种。
Promise的then()方法可以用来监听Promise的状态变化。
Promise的catch()方法可以用来处理Promise被rejected的情况。
Promise的then()和catch()方法都是链式调用的。
Promise的then()和catch()方法都是返回一个新的Promise。

三、实现一个符合A+规范的Promise

现在，我们将一步一步实现一个符合A+规范的Promise。

1. 创建Promise

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

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

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

  executor(resolve, reject);
}

2. 实现then方法

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

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

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

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

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

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

  return promise2;
};

3. 实现catch方法

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

4. 实现finally方法

Promise.prototype.finally = function(onFinally) {
  return this.then(value => {
    onFinally();
    return value;
  }, reason => {
    onFinally();
    throw reason;
  });
};

四、使用Promise

现在，我们已经实现了一个符合A+规范的Promise。接下来，我们来看一下如何使用它。

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

promise.then(value => {
  console.log(value); // 输出：成功了！
});