在 JavaScript 中用 async-await 解释 Promise.all

在 JavaScript 中，有时候我们需要等待多个异步操作完成之后再继续执行后续的代码。为了实现这个目的，可以使用 Promise.all 方法来等待多个 Promise 对象全部完成。在 ES2017 中，为了进一步简化异步操作的代码编写，引入了 async/await 关键字来简化 Promise 的使用。本文将介绍如何用 async-await 来解释 Promise.all 方法。

Promise.all 方法

Promise.all 方法接收一个可迭代对象作为参数，它可以是一个数组、一个 Set 对象、或者任何实现了可迭代协议的对象。

该方法返回一个新的 Promise 对象，如果参数中的所有 Promise 都成功地解决，那么该 Promise 的解决值将是一个包含所有 Promise 解决值的数组；如果任何一个 Promise 解决失败，那么该 Promise 的拒绝原因会直接传递给其后续处理函数。

下面是一个简单的例子，展示了 Promise.all 方法的基本用法：

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 对象，它们都是立即解决的，解决值分别为 1、2、3。在调用 Promise.all 方法时，我们将这三个 Promise 对象封装在了一个数组中。当这三个 Promise 都成功地解决后，Promise.all 所返回的 Promise 对象也会解决，并把这三个 Promise 的解决值封装在一个数组中返回。

但是，如果其中任何一个 Promise 失败了，Promise.all 的返回 Promise 对象也会立即拒绝并返回失败原因，例如：

const promise1 = Promise.resolve(1);
const promise2 = Promise.reject('Something went wrong');
const promise3 = Promise.resolve(3);

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

在这个例子中，promise2 失败了，因此 Promise.all 方法返回的 Promise 对象也会拒绝并传递该错误信息。

async-await

async/await 关键字是一种语言特性，它允许我们以同步的方式编写异步代码。在一个 async 函数中，我们可以使用 await 关键字来等待一个 Promise 对象解决或拒绝，当它解决时，await 操作会返回 Promise 的解决值；当它拒绝时，await 操作会把相应的错误信息包装成一个被拒绝的 Promise 并抛出。

下面是一个使用 async-await 的简单例子：

async function test() {
  const result = await Promise.resolve('Hello');
  console.log(result); // 'Hello'
}

test();

在这个例子中，我们定义了一个名为 test 的 async 函数，其中通过 await 操作等待一个 Promise 对象，该 Promise 对象会立即解决并返回字符串 'Hello'。当该 Promise 解决时，await 操作会返回这个字符串，并将其赋值给变量 result，然后我们打印出这个变量即可看到它的值。

用 async-await 解释 Promise.all

使用 Promise.all 方法可以等待所有传递给它的 Promise 都解决之后再继续执行后续的代码。我们可以使用 async-await 关键字来简化 Promise.all 的使用，这样能让我们的代码更加易读易懂。

我们可以先封装一个异步函数，将多个 Promise 对象作为参数传递给它，然后在函数内使用 Promise.all 方法等待所有 Promise 解决，如下所示：

async function waitAll(promises) {
  const results = await Promise.all(promises);
  return results;
}

在这个函数内，我们先定义了一个名为 results 的变量，并通过 await 操作等待 Promise.all 方法返回的结果。当所有传递给 Promise.all 的 Promise 对象都解决之后，results 将会是一个包含所有解决值的数组。最后，我们将这个数组作为函数的返回值。

我们可以通过下面的代码来测试 waitAll 函数的效果：

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

async function test() {
  const results = await waitAll([promise1, promise2, promise3]);
  console.log(results); // [1, 2, 3]
}

test();

在这个例子中，我们先定义了三个 Promise 对象，然后将它们封装在一个数组中传递给了 waitAll 函数。在 test 函数内，我们通过 await 操作等待 waitAll 返回的结果，即一个包含所有解决值的数组。最后，我们打印出这个数组即可看到它的值。

总结

通过 async-await 关键字，我们可以以更直观、简单的方式来使用 Promise.all 方法来等待多个 Promise 解决。我们可以通过定义一个封装了 Promise.all 方法的异步函数来实现这个目的，这样可以让我们的代码更加易读易懂。