Promises/A+ 规范的介绍与 Promise 实现细节详解

概述

Promises 是一种异步编程的解决方案，它的目的是解决回调地狱的问题。在 JavaScript 中，异步操作通常使用回调函数来处理，但是回调函数嵌套过多会导致代码可读性差、维护困难等问题。Promises 的出现解决了这些问题。

Promises/A+ 是 Promises 的一种规范，它定义了 Promises 的行为和方法。在本文中，我们将详细介绍 Promises/A+ 规范以及 Promise 的实现细节。

Promises/A+ 规范

Promises/A+ 规范定义了 Promise 的三种状态：pending（等待态）、fulfilled（成功态）和 rejected（失败态）。

一个 Promise 对象一旦从 pending 状态转换为 fulfilled 或 rejected 状态，就永远不会再次转换为其他状态。同时，Promise 对象必须提供 then 方法来访问其最终的值或原因。

Promises/A+ 规范还定义了 then 方法的行为。then 方法接收两个参数，onFulfilled 和 onRejected，它们分别表示 Promise 对象成功或失败时的回调函数。then 方法返回一个新的 Promise 对象，可以链式调用多个 then 方法。

Promise 的实现细节

Promise 的实现需要满足 Promises/A+ 规范，以下是一个简单的 Promise 实现：

// javascriptcn.com 代码示例
class Promise {
  constructor(executor) {
    this.state = 'pending';
    this.result = undefined;
    this.reason = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

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

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

    try {
      executor(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }

  then(onFulfilled, onRejected) {
    const promise = new Promise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        setTimeout(() => {
          try {
            const result = onFulfilled(this.result);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else if (this.state === 'rejected') {
        setTimeout(() => {
          try {
            const reason = onRejected(this.reason);
            reject(reason);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else {
        this.onFulfilledCallbacks.push(result => {
          setTimeout(() => {
            try {
              const result = onFulfilled(this.result);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });

        this.onRejectedCallbacks.push(reason => {
          setTimeout(() => {
            try {
              const reason = onRejected(this.reason);
              reject(reason);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
      }
    });

    return promise;
  }
}

上面的代码中，Promise 类有一个构造函数，接收一个执行器函数 executor，它有两个参数 resolve 和 reject，分别表示 Promise 对象成功和失败时的回调函数。

构造函数中定义了 Promise 对象的状态和结果，以及成功和失败时的回调数组。在构造函数中执行 executor 函数，并根据执行结果改变 Promise 对象的状态和结果，并执行成功或失败的回调函数。

then 方法接收两个参数 onFulfilled 和 onRejected，分别表示 Promise 对象成功或失败时的回调函数。根据 Promise 对象的状态，执行相应的回调函数，并返回一个新的 Promise 对象，可以链式调用多个 then 方法。

示例代码

以下是使用 Promise 对象实现异步操作的示例代码：

// javascriptcn.com 代码示例
function fetchData(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(xhr.responseText);
        } else {
          reject(new Error(xhr.statusText));
        }
      }
    };
    xhr.send();
  });
}

fetchData('/data')
  .then(data => {
    console.log(data);
    return fetchData('/more-data');
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

上面的代码中，fetchData 函数返回一个 Promise 对象，用于处理异步操作。then 方法中的回调函数可以处理 Promise 对象的成功或失败结果，并返回一个新的 Promise 对象，用于链式调用多个 then 方法。catch 方法用于处理 Promise 对象的失败结果。

总结

Promises 是一种解决回调地狱问题的异步编程解决方案。Promises/A+ 规范定义了 Promise 的行为和方法，Promise 的实现需要满足 Promises/A+ 规范。通过实现 Promise 对象，可以使用 Promise 对象处理异步操作，并实现链式调用多个异步操作。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650be95495b1f8cacd5f9500