如何使用 Promise.all() 处理异步并发操作？

简介： 使用 `Promise.all()` 可以方便地处理多个异步并发操作，提高代码的执行效率和可读性，同时通过统一的 `.catch()` 方法能够有效地处理异步操作中的错误，确保程序的稳定性。

在现代 web 开发中，常常需要向服务器发送多个请求，并等待这些请求的响应结果。为了避免在请求过程中阻塞主线程，JavaScript 提供了异步编程的能力。这种异步编程方式可以提高应用的响应性和性能，特别是在高并发情况下。

高并发场景通常指的是同时发起大量请求，可能会对服务器或客户端的性能造成压力。在处理这些请求时，需要选择一种高效且能保证正确性的方式，避免出现竞态条件、资源浪费等问题。

Promise.all() 方法接受一个包含多个Promise对象的数组作为参数，其语法格式为：Promise.all([promise1, promise2,..., promiseN])，它会并行地执行这些Promise，并返回一个新的Promise。

当数组中的所有Promise都成功地转变为 fulfilled 状态时，Promise.all() 返回的新Promise才会变为 fulfilled，并将所有Promise的成功结果按照数组顺序组成一个新的数组作为最终结果传递给 .then() 方法的回调函数。
示例代码如下：

const promise1 = new Promise((resolve) => setTimeout(() => resolve('数据1'), 1000));
const promise2 = new Promise((resolve) => setTimeout(() => resolve('数据2'), 2000));
const promise3 = new Promise((resolve) => setTimeout(() => resolve('数据3'), 1500));

Promise.all([promise1, promise2, promise3])
.then((results) => {
复制代码
```
  console.log('所有请求都成功，结果为：', results);
});
```

在上述示例中，promise1、promise2 和 promise3 分别在不同的时间后成功，Promise.all() 会等待所有的Promise都成功后，将它们的结果组成数组 ['数据1', '数据2', '数据3'] 传递给 .then() 方法的回调函数进行打印。

只要数组中有一个Promise被 rejected，那么 Promise.all() 返回的新Promise就会立即变为 rejected，并将第一个被 rejected 的Promise的错误信息传递给 .catch() 方法的回调函数。
示例代码如下：

const promiseA = new Promise((resolve) => setTimeout(() => resolve('A成功'), 2000));
const promiseB = new Promise((resolve, reject) => setTimeout(() => reject('B失败'), 1500));
const promiseC = new Promise((resolve) => setTimeout(() => resolve('C成功'), 1000));

Promise.all([promiseA, promiseB, promiseC])
.catch((error) => {
复制代码
```
  console.log('有请求失败，错误为：', error);
});
```

在上述示例中，由于 promiseB 会在 1500 毫秒时失败，所以 Promise.all() 返回的Promise会立即变为 rejected，并执行 .catch() 方法打印出 B失败。

同时获取多个接口数据 ：在实际开发中，常常需要同时调用多个接口来获取不同的数据，然后在所有数据都获取到后进行统一处理。例如，一个页面需要展示用户信息、文章列表和评论列表，这三个数据分别来自不同的接口，可以使用 Promise.all() 来同时发起这三个接口的请求，然后在所有请求都成功返回后，将数据整合并渲染到页面上。

const getUserInfo = () => new Promise((resolve) => setTimeout(() => resolve({
name: '张三', age: 25 }), 1000));
const getArticleList = () => new Promise((resolve) => setTimeout(() => resolve(['文章1', '文章2', '文章3']), 1500));
const getCommentList = () => new Promise((resolve) => setTimeout(() => resolve(['评论1', '评论2']), 1200));

Promise.all([getUserInfo(), getArticleList(), getCommentList()])
.then(([userInfo, articleList, commentList]) => {
复制代码
```
  console.log('用户信息：', userInfo);
  console.log('文章列表：', articleList);
  console.log('评论列表：', commentList);
  // 在这里可以进行页面渲染等操作，将数据展示到页面上
})
```
.catch((error) => {
复制代码
```
  console.log('获取数据出错：', error);
});
```

在上述示例中，通过 Promise.all() 同时发起了三个获取数据的Promise操作，当所有数据都获取成功后，在 .then() 方法中对数据进行了打印和后续的处理。

并行执行多个异步任务并汇总结果：除了获取接口数据，还可以用于并行执行多个其他类型的异步任务，如文件读取、数据处理等，并将各个任务的结果汇总起来进行进一步的操作。例如，需要同时读取多个文件的内容，然后将这些内容合并成一个字符串。

const fs = require('fs').promises;

const readFile1 = () => fs.readFile('file1.txt', 'utf8');
const readFile2 = () => fs.readFile('file2.txt', 'utf8');
const readFile3 = () => fs.readFile('file3.txt', 'utf8');

Promise.all([readFile1(), readFile2(), readFile3()])
.then(([content1, content2, content3]) => {
复制代码
```
  const combinedContent = content1 + content2 + content3;
  console.log('合并后的文件内容：', combinedContent);
  // 可以对合并后的内容进行进一步处理，如写入新的文件等
})
```
.catch((error) => {
复制代码
```
  console.log('读取文件出错：', error);
});
```

在上述示例中，使用 Promise.all() 并行地读取了三个文件的内容，然后将它们合并成一个字符串并进行了打印。

使用 Promise.all() 可以方便地处理多个异步并发操作，提高代码的执行效率和可读性，同时通过统一的 .catch() 方法能够有效地处理异步操作中的错误，确保程序的稳定性。