ES2020 之 Promise.all 方法：轻松处理多个 Promise 并发执行

Promise.all 是 ES6 引入的一个方法，可以将多个 Promise 实例包装成一个新的 Promise 实例。当所有的 Promise 实例都成功时，返回一个成功的结果数组，否则返回第一个失败的 Promise 实例的结果。在 ES2020 中，Promise.all 方法得到了进一步的增强，本文将详细介绍 Promise.all 方法的使用和优化。

Promise.all 基本用法

Promise.all 可以接受一个包含多个 Promise 实例的数组作为参数，例如：

const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3]).then(values => {
  console.log(values); // [1, 2, 3]
});

在上面的代码中，我们创建了三个 Promise 实例，然后将它们放到一个数组中，使用 Promise.all 方法包装这个数组。当所有的 Promise 实例都成功时，Promise.all 返回一个包含所有 Promise 实例结果的数组。

如果其中一个 Promise 实例失败，Promise.all 方法会立即返回该 Promise 实例的结果，例如：

const promise1 = Promise.resolve(1);
const promise2 = Promise.reject(2);
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3]).catch(error => {
  console.log(error); // 2
});

在上面的代码中，promise2 失败了，Promise.all 方法会立即返回该 Promise 实例的结果，因此 catch 方法会输出 2。

Promise.all 优化

在 ES2020 中，Promise.all 方法得到了进一步的增强，可以通过 Promise.allSettled 方法来处理多个 Promise 实例并发执行的情况。Promise.allSettled 方法接受一个包含多个 Promise 实例的数组作为参数，然后返回一个新的 Promise 实例，该 Promise 实例在所有 Promise 实例都完成后才会被 resolved，返回一个包含所有 Promise 实例结果的数组，不管 Promise 实例是成功还是失败。例如：

const promise1 = Promise.resolve(1);
const promise2 = Promise.reject(2);
const promise3 = Promise.resolve(3);

Promise.allSettled([promise1, promise2, promise3]).then(results => {
  console.log(results); // [{ status: 'fulfilled', value: 1 }, { status: 'rejected', reason: 2 }, { status: 'fulfilled', value: 3 }]
});

在上面的代码中，我们使用 Promise.allSettled 方法来处理多个 Promise 实例并发执行的情况。当所有的 Promise 实例都完成后，Promise.allSettled 方法返回一个包含所有 Promise 实例结果的数组，不管 Promise 实例是成功还是失败。

Promise.all 方法的指导意义

Promise.all 方法是处理多个 Promise 实例并发执行的常用方法，可以帮助我们提高代码的效率和可读性。在实际开发中，我们经常会遇到需要同时处理多个异步操作的情况，例如发送多个请求、同时加载多个资源等。使用 Promise.all 方法可以方便地处理这些情况，提高代码的可维护性和可读性。

示例代码

下面是一个使用 Promise.all 方法处理多个请求的示例代码：

// www.javascriptcn.com code example
const urls = ['url1', 'url2', 'url3'];

const requests = urls.map(url => fetch(url));

Promise.all(requests)
  .then(responses => {
    // 所有请求都成功
    for (const response of responses) {
      console.log(`${response.url}: ${response.status}`);
    }
  })
  .catch(error => {
    // 至少有一个请求失败
    console.error(error);
  });

在上面的代码中，我们首先定义了一个包含多个请求 URL 的数组 urls，然后使用 map 方法将每个 URL 转换成一个 fetch 请求。最后，使用 Promise.all 方法将所有请求包装成一个新的 Promise 实例，当所有请求都成功时，输出响应状态码，否则输出错误信息。

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