剖析Promise A+，从零搭建承诺的磐石

2024-02-23 15:20:27

从2015年起，Promise就已在JavaScript中扮演着举足轻重的角色，它被广泛应用于异步编程，是现代JavaScript开发不可或缺的一部分。但许多开发者对Promise A+规范和其实现的具体细节知之甚少。

本文将带领您深入探究Promise A+规范，亲手打造一个完整的Promise实现，并对Promise的用法进行全面的剖析。您将掌握Chaining、Race、All、Finally、Async/Await等重要概念，了解Promise在错误处理和异步编程中的妙用。通过精心构建的示例和清晰的解释，您将对Promise有更深刻的理解，从而能够构建可靠、健壮的异步应用程序。

Promise A+规范

Promise A+规范定义了Promise的标准，它规定了Promise对象的行为和用法。规范中最重要的概念包括：

Promise: 一个有then方法的对象或者函数。
Thenable: 一个有then方法的对象或者函数。
Value: Promise成功态的值，值的类型是任何符合JS规范的类型。
Reason: Promise失败态的原因，通常是一个Error对象。
Pending: Promise的初始状态，表示Promise尚未完成。
Resolved: Promise成功态，表示Promise已经完成且值已确定。
Rejected: Promise失败态，表示Promise已经完成且原因已确定。

Promise实现

为了更好地理解Promise，我们从头开始实现一个符合Promise A+规范的Promise。

class Promise {
  constructor(executor) {
    this.state = "pending";
    this.value = undefined;
    this.reason = undefined;
    this.onResolvedCallbacks = [];
    this.onRejectedCallbacks = [];

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

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

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

  then(onResolved, onRejected) {
    if (this.state === "pending") {
      this.onResolvedCallbacks.push(onResolved);
      this.onRejectedCallbacks.push(onRejected);
    } else if (this.state === "resolved") {
      onResolved(this.value);
    } else if (this.state === "rejected") {
      onRejected(this.reason);
    }

    return new Promise((resolve, reject) => {
      this.then(
        (value) => {
          try {
            const result = onResolved(value);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        },
        (reason) => {
          try {
            const result = onRejected(reason);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }
      );
    });
  }
}

Promise用法

了解了Promise A+规范和Promise的实现后，我们来看看如何使用Promise。

Chaining

Chaining是Promise最强大的特性之一，它允许我们将多个Promise串联起来，形成一个异步操作的链条。

fetch("https://example.com/api/users")
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

在这个示例中，我们首先使用fetch函数获取一个API的响应，然后使用then方法将响应转换成JSON格式的数据。接下来，我们再次使用then方法将数据输出到控制台。如果在任何步骤中发生错误，我们使用catch方法来捕获并处理错误。

Race

Promise.race()方法接受一个Promise数组作为参数，并返回一个新的Promise。这个新的Promise将在数组中的第一个Promise完成时立即完成，无论这个Promise是成功还是失败。

const promises = [
  fetch("https://example.com/api/users"),
  fetch("https://example.com/api/posts"),
];

Promise.race(promises)
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.error(error);
  });

在这个示例中，我们创建了一个包含两个Promise的数组。然后，我们使用Promise.race()方法将这个数组作为参数，并返回一个新的Promise。这个新的Promise将在数组中的第一个Promise完成时立即完成，无论这个Promise是成功还是失败。

All

Promise.all()方法接受一个Promise数组作为参数，并返回一个新的Promise。这个新的Promise将在数组中的所有Promise都完成时立即完成，无论这些Promise是成功还是失败。

const promises = [
  fetch("https://example.com/api/users"),
  fetch("https://example.com/api/posts"),
];

Promise.all(promises)
  .then((responses) => {
    console.log(responses);
  })
  .catch((error) => {
    console.error(error);
  });

在这个示例中，我们创建了一个包含两个Promise的数组。然后，我们使用Promise.all()方法将这个数组作为参数，并返回一个新的Promise。这个新的Promise将在数组中的所有Promise都完成时立即完成，无论这些Promise是成功还是失败。

Finally

Promise.finally()方法接受一个回调函数作为参数，并返回一个新的Promise。这个新的Promise将在原Promise完成时立即完成，无论原Promise是成功还是失败。

fetch("https://example.com/api/users")
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  })
  .finally(() => {
    console.log("Done!");
  });

在这个示例中，我们使用Promise.finally()方法为fetch请求添加了一个finally回调函数。这个回调函数将在fetch请求完成时立即执行，无论fetch请求是成功还是失败。

Async/Await

Async/Await是ES8中引入的新语法，它允许我们以同步的方式编写异步代码。

async function fetchUsers() {
  const response = await fetch("https://example.com/api/users");
  const data = await response.json();
  console.log(data);
}

fetchUsers();

在这个示例中，我们定义了一个async函数fetchUsers()。在这个函数中，我们使用await等待fetch请求和JSON解析操作完成。这样，我们就可以像编写同步代码一样编写异步代码，从而使代码更加易读和易于维护。

总结

Promise是JavaScript中用于处理异步操作的强大工具。通过了解Promise A+规范和Promise的实现，您可以更好地理解Promise的用法。您可以使用Promise来实现Chaining、Race、All、Finally、Async/Await等重要概念，并在错误处理和异步编程中发挥Promise的妙用。