如何使用 Promise.all() 处理多个 Promise 并发-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常会遇到需要处理多个异步操作的场景，比如同时请求多个接口数据。而 Promise.all() 方法就是用来处理这种情况的，它可以将多个 Promise 对象并发执行，等所有 Promise 对象都执行完成后，返回一个包含所有 Promise 结果的数组。

Promise.all() 的基本用法

Promise.all() 方法接收一个 Promise 数组作为参数，返回一个新的 Promise 对象，该 Promise 对象在所有 Promise 对象都执行完成后，才会被 resolve，返回一个包含所有 Promise 结果的数组。如果其中任何一个 Promise 对象被 reject，该 Promise 对象将会被 reject，并返回第一个被 reject 的 Promise 对象的错误信息。

下面是 Promise.all() 的基本用法示例：

// javascriptcn.com 代码示例
const promise1 = Promise.resolve('result1');
const promise2 = Promise.resolve('result2');
const promise3 = Promise.resolve('result3');

Promise.all([promise1, promise2, promise3]).then(results => {
  console.log(results); // ['result1', 'result2', 'result3']
}).catch(error => {
  console.error(error);
});

在上面的示例中，我们创建了三个 Promise 对象，分别返回 'result1'、'result2'、'result3' 三个结果。然后将这三个 Promise 对象传入 Promise.all() 方法中，等待它们全部执行完成后，打印出结果数组。由于所有 Promise 对象都是 resolve 状态，因此最终输出的结果数组就是 ['result1', 'result2', 'result3']。

Promise.all() 的进阶用法

除了基本用法，Promise.all() 还有一些进阶用法，可以帮助我们更好地处理多个 Promise 对象的并发执行。

处理异步任务中的错误

在异步任务中，错误处理是非常重要的一部分。如果 Promise.all() 中的任何一个 Promise 对象被 reject，那么整个 Promise.all() 就会被 reject，并返回第一个被 reject 的 Promise 对象的错误信息。这时候我们可以使用 Promise.all() 的 catch() 方法来捕获错误，进行错误处理。

下面是一个示例，演示了如何在 Promise.all() 中进行错误处理：

// javascriptcn.com 代码示例
const promise1 = Promise.resolve('result1');
const promise2 = Promise.reject('error2');
const promise3 = Promise.resolve('result3');

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

在上面的示例中，我们故意将第二个 Promise 对象设置为 reject 状态，并传入了错误信息 'error2'。在 Promise.all() 中，我们使用了 catch() 方法来捕获错误，并输出错误信息。

处理大量的 Promise 对象

当我们需要处理大量的 Promise 对象时，手动创建 Promise 数组并传入 Promise.all() 会变得非常麻烦。这时候我们可以使用 Array 的 map() 方法来自动生成 Promise 数组。

下面是一个示例，演示了如何使用 Array 的 map() 方法来处理大量的 Promise 对象：

// javascriptcn.com 代码示例
const urls = [
  'https://jsonplaceholder.typicode.com/todos/1',
  'https://jsonplaceholder.typicode.com/todos/2',
  'https://jsonplaceholder.typicode.com/todos/3',
  'https://jsonplaceholder.typicode.com/todos/4',
  'https://jsonplaceholder.typicode.com/todos/5'
];

const promises = urls.map(url => {
  return fetch(url).then(response => response.json());
});

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

在上面的示例中，我们使用了一个包含了 5 个接口地址的数组 urls，然后使用 Array 的 map() 方法来自动生成了包含 5 个 Promise 对象的数组 promises。最后将这个数组传入 Promise.all() 中，等待所有 Promise 对象都执行完成后，打印出结果数组。

处理不确定数量的 Promise 对象

有时候我们需要处理的 Promise 对象数量是不确定的，比如从后端动态获取需要处理的接口列表。这时候我们可以使用 Promise.allSettled() 方法来处理不确定数量的 Promise 对象。

Promise.allSettled() 方法与 Promise.all() 方法类似，不同的是它不会在任何 Promise 对象被 reject 时立即返回，而是等待所有 Promise 对象都执行完成后，返回一个包含所有 Promise 结果的数组。这个结果数组中包含了每个 Promise 对象的状态信息，包括它是 resolve 还是 reject 状态，以及对应的结果或错误信息。

下面是一个示例，演示了如何使用 Promise.allSettled() 方法来处理不确定数量的 Promise 对象：

// javascriptcn.com 代码示例
const urls = [
  'https://jsonplaceholder.typicode.com/todos/1',
  'https://jsonplaceholder.typicode.com/todos/2',
  'https://jsonplaceholder.typicode.com/todos/3',
  'https://jsonplaceholder.typicode.com/todos/4',
  'https://jsonplaceholder.typicode.com/todos/5'
];

const promises = urls.map(url => {
  return fetch(url).then(response => response.json());
});

Promise.allSettled(promises).then(results => {
  console.log(results);
});

在上面的示例中，我们使用了与前一个示例相同的代码来生成 Promise 数组 promises。然后将这个数组传入 Promise.allSettled() 中，等待所有 Promise 对象都执行完成后，打印出结果数组。注意，这个结果数组中不仅包含了所有 Promise 对象的结果，还包含了每个 Promise 对象的状态信息。

总结

Promise.all() 方法是处理多个 Promise 对象并发执行的重要工具，它可以帮助我们更好地处理异步任务中的错误，处理大量的 Promise 对象，以及处理不确定数量的 Promise 对象。在实际开发中，我们可以根据具体的需求选择使用不同的 Promise.all() 方法，提高代码的可读性和可维护性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6560bac6d2f5e1655daedacf