一文详解如何有效的处理Promise并发

在JavaScript的异步编程中，Promise是一种广泛使用的方式，它能很好地解决回调地狱问题，提高代码的可读性和可维护性。然而，在实际应用中，也会遇到需要同时执行多个Promise的场景，这就需要我们学会如何处理Promise并发。

1. Promise并发的几种基本方式

在处理Promise并发时，主要有以下几种方式：

1.1 Promise.all

Promise.all(iterable) 方法返回一个 Promise 实例，当 iterable 参数中所有的 Promise 都变为成功状态后，该实例才会变为成功状态。反之，只要一个 Promise 的状态变为失败状态，Promise.all 返回的 Promise 实例就会变成失败状态。

示例：

const promises = [Promise.resolve(1), Promise.resolve(2)];
Promise.all(promises)
  .then(results => console.log(results))
  .catch(error => console.error(error))
// 输出 [1, 2]

若其中一个Promise发生失败，Promise.all返回的Promise实例会失败，并将失败的原因传递给catch方法的回调函数。

1.2 Promise.race

Promise.race(iterable) 方法返回一个 Promise 实例，它将 iterable 参数中的所有 Promise 实例包装成一个新的 Promise 实例，并等待 iterable 中的任意一个 Promise 实例的状态改变。只要 iterable 中有一个 Promise 实例变为成功或失败状态，新的 Promise 实例就会变为相同的状态。

示例：

const promises = [
  new Promise(resolve => setTimeout(() => resolve(1), 1000)),
  new Promise(resolve => setTimeout(() => resolve(2), 2000))
];
Promise.race(promises)
  .then(result => console.log(result))
  .catch(error => console.error(error))
// 输出 1

1.3 Promise.allSettled

Promise.allSettled(iterable) 方法返回一个在所有 Promise 都已经完成（fulfilled 或 rejected）后的 Promise，返回值是一个对象数组，对象结构如下：

{
  status: "fulfilled" | "rejected",
  value: promise1的返回值 或 promise2抛出的错误
}

示例：

const promises = [Promise.resolve(1), Promise.reject('error')];
Promise.allSettled(promises)
  .then(results => console.log(results))
  .catch(error => console.error(error))
// 输出 [{status: "fulfilled", value: 1}, {status: "rejected", reason: "error"}]

2. 处理Promise并发的实际应用

接下来，我们就来看看如何在实际应用中，有效地处理Promise并发。以axios为例，如何执行多个axios请求并处理响应结果。

const urls = [url1, url2];
const requests = urls.map(url => axios.get(url));
Promise.all(requests)
  .then(results => {
    results.forEach(result => console.log(result.data));
  })
  .catch(error => console.error(error));

此处，我们使用Promise.all对多个请求进行并发处理，并在获取结果后，使用forEach方法分别对每个结果进行处理。

然而，若其中有一个请求失败，就会导致Promise.all返回的Promise实例失败，并返回失败的原因。此时可以使用Promise.allSettled和filter方法，过滤出成功的响应结果进行处理。

const urls = [url1, url2];
const requests = urls.map(url => axios.get(url));
Promise.allSettled(requests)
  .then(results => {
    const fulfilledResults = results.filter(result => result.status === 'fulfilled');
    fulfilledResults.forEach(result => console.log(result.value.data));
  })
  .catch(error => console.error(error));

总结

在实际应用中，处理Promise并发是一种常见的操作。掌握对应的处理方式，不仅可以提高代码的可读性和可维护性，还能更好地使用Promise实现异步操作。