手写Promise.all：多重承诺的多线程编排管理

2024-01-30 18:57:46

前言：揭开Promise.all的面纱

在当今快节奏的应用程序开发世界中，异步编程已成为一项必不可少的技能，它使我们能够在不阻塞主线程的情况下执行任务，从而提高应用程序的响应速度和性能。

Promise是JavaScript中处理异步操作的强大工具，它提供了对异步操作进行管理和编排的统一接口。Promise对象代表着未来将要完成或失败的操作，它提供了then方法，允许我们指定在异步操作完成或失败时要执行的回调函数。

Promise.all是Promise API中非常有用且常用的函数，它允许我们对多个异步操作进行并行处理，并将它们的结果收集到一个数组中。这使得我们能够在等待所有操作完成之后执行后续操作，而无需手动跟踪每个操作的状态。

揭开Promise.all的内部运作机制

为了理解如何手写Promise.all，我们需要了解其内部运作机制。Promise.all函数接收一个Promise对象数组作为参数，并返回一个新的Promise对象。这个新的Promise对象代表着所有传入Promise对象都成功完成或都失败。

Promise.all函数内部维护了一个计数器，用于跟踪有多少个Promise对象已经成功完成或失败。当计数器等于传入Promise对象数组的长度时，表示所有Promise对象都已完成。此时，Promise.all函数将收集所有成功完成的Promise对象的结果，并将其作为数组传递给then方法指定的回调函数。

如果任何一个传入的Promise对象失败，Promise.all函数将立即以失败状态终止，并将错误原因传递给then方法指定的回调函数。

亲自操刀：一步一步手写Promise.all

既然我们对Promise.all的内部运作机制有了初步了解，现在让我们亲自操刀，一步一步地实现它。

初始化计数器： 首先，我们需要初始化一个计数器变量来跟踪已完成的Promise对象的数量。计数器的初始值为0。
创建结果数组： 接下来，我们需要创建一个数组来存储所有成功完成的Promise对象的结果。
遍历Promise对象数组： 我们使用forEach方法遍历传入的Promise对象数组。对于每个Promise对象，我们执行以下步骤：
- 将计数器加1。
- 调用Promise对象的then方法，指定两个回调函数：
  - 成功回调函数：在Promise对象成功完成时执行。在这个回调函数中，我们将成功的结果存储到结果数组中，并将计数器减1。
  - 失败回调函数：在Promise对象失败时执行。在这个回调函数中，我们将失败的原因传递给Promise.all函数的then方法指定的回调函数，并立即终止Promise.all函数。
检查计数器： 在遍历Promise对象数组之后，我们检查计数器是否等于传入Promise对象数组的长度。如果相等，表示所有Promise对象都已完成。此时，我们将结果数组传递给Promise.all函数的then方法指定的回调函数。

通过这些步骤，我们就实现了自己的Promise.all函数。它与ECMAScript 2015中引入的标准Promise.all行为一致，为我们提供了控制异步操作的强大方法。

实际案例：Promise.all的应用场景

为了进一步理解Promise.all的用法，让我们来看一个实际案例。假设我们有一个包含多个图像URL的数组，并且我们希望并行加载这些图像。我们可以使用Promise.all来实现这个功能：

const imageURLs = ['image1.jpg', 'image2.jpg', 'image3.jpg'];

Promise.all(imageURLs.map(url => {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.onload = () => resolve(image);
    image.onerror = () => reject(new Error('Failed to load image'));
    image.src = url;
  });
})).then((images) => {
  // 所有图像已成功加载
  console.log(images);
}).catch((error) => {
  // 至少一张图像加载失败
  console.error(error);
});

在这个案例中，我们使用map方法将每个图像URL转换为一个Promise对象，然后使用Promise.all将这些Promise对象组合成一个新的Promise对象。当所有图像加载成功后，then方法指定的回调函数将被执行，并将所有加载的图像作为数组传递给回调函数。如果任何一张图像加载失败，catch方法指定的回调函数将被执行，并将错误原因传递给回调函数。