深入理解JS中 Promise.all 和 Promise.allSettled 特性和区别应用场景分析

深入理解 Promise.all 和 Promise.allSettled：特性、区别与应用场景

在 JavaScript 中，Promise.all 和 Promise.allSettled 是处理多个 Promise 的常用方法。它们都可以用于并发执行多个异步操作，但在行为、返回值和应用场景上有显著区别。本文将深入探讨它们的特性、区别以及如何在实际开发中选择合适的方法。

1. Promise.all 的特性

1.1 基本行为

• Promise.all 接收一个 Promise 数组（或可迭代对象），并等待所有 Promise 完成。
• 如果所有 Promise 都成功（fulfilled），则返回一个结果数组，数组中的每个元素对应传入的 Promise 的结果。
• 如果任何一个 Promise 失败（rejected），则立即抛出错误，并忽略其他 Promise 的结果。

1.2 返回值

• 成功时：返回一个结果数组，结果的顺序与传入的 Promise 顺序一致。
• 失败时：返回第一个失败的 Promise 的错误。

1.3 示例

const promises = [
  Promise.resolve(1),
  Promise.resolve(2),
  Promise.reject('Error'),
];
Promise.all(promises)
  .then(results => console.log(results)) // 不会执行
  .catch(error => console.error(error)); // 输出: Error

1.4 适用场景

• 当你需要所有 Promise 都成功才能继续时。
• 例如：多个请求都成功后才能进行下一步操作。

2. Promise.allSettled 的特性

2.1 基本行为

• Promise.allSettled 接收一个 Promise 数组（或可迭代对象），并等待所有 Promise 完成（无论成功或失败）。
• 返回一个结果数组，数组中的每个元素是一个对象，包含 Promise 的状态（fulfilled 或 rejected）和结果（或错误）。

2.2 返回值

返回一个数组，数组中的每个元素是一个对象，包含以下属性：

• status：Promise 的状态，'fulfilled' 或 'rejected'。
• value（如果状态是 fulfilled）：Promise 的结果。
• reason（如果状态是 rejected）：Promise 的错误原因。

2.3 示例

const promises = [
  Promise.resolve(1),
  Promise.resolve(2),
  Promise.reject('Error'),
];
Promise.allSettled(promises).then(results => {
  console.log(results);
});

输出：

[
  { status: 'fulfilled', value: 1 },
  { status: 'fulfilled', value: 2 },
  { status: 'rejected', reason: 'Error' }
]

2.4 适用场景

• 当你需要知道所有 Promise 的最终状态（无论成功或失败）时。
• 例如：批量处理请求，需要知道每个请求的结果。

3. Promise.all 和 Promise.allSettled 的区别

特性Promise.allPromise.allSettled对失败的处理任何一个 Promise 失败，立即抛出错误等待所有 Promise 完成，无论成功或失败返回值成功时返回结果数组，失败时返回错误返回一个包含所有 Promise 状态的对象数组返回值顺序严格按照传入的 Promise 顺序严格按照传入的 Promise 顺序适用场景所有 Promise 必须成功需要知道所有 Promise 的最终状态是否捕获失败的结果否是

4. 返回值顺序的保证

无论是 Promise.all 还是 Promise.allSettled，它们的返回值都会严格按照传入的 Promise 顺序返回结果，无论这些 Promise 的实际完成顺序如何。

4.1 Promise.all 的顺序保证

• 即使某些 Promise 先完成，结果的顺序仍然与传入的 Promise 顺序一致。
• 如果任何一个 Promise 失败，Promise.all 会立即抛出错误，但在此之前已完成的结果仍然会按照顺序返回。

示例：

const promises = [
  new Promise(resolve => setTimeout(() => resolve(1), 1000)), // 第1个
  new Promise(resolve => setTimeout(() => resolve(2), 500)),  // 第2个
  new Promise(resolve => setTimeout(() => resolve(3), 200)),  // 第3个
];
Promise.all(promises)
  .then(results => console.log(results)) // 输出: [1, 2, 3]
  .catch(error => console.error(error));

4.2 Promise.allSettled 的顺序保证

无论 Promise 是成功还是失败，Promise.allSettled 都会等待所有 Promise 完成，并按照传入的顺序返回结果。 示例：

const promises = [
  new Promise(resolve => setTimeout(() => resolve(1), 1000)), // 第1个
  new Promise((resolve, reject) => setTimeout(() => reject('Error'), 500)), // 第2个
  new Promise(resolve => setTimeout(() => resolve(3), 200)),  // 第3个
];
Promise.allSettled(promises)
  .then(results => console.log(results));

输出：

[
  { status: 'fulfilled', value: 1 }, // 第1个 Promise 的结果
  { status: 'rejected', reason: 'Error' }, // 第2个 Promise 的结果
  { status: 'fulfilled', value: 3 } // 第3个 Promise 的结果
]

5. 如何选择使用哪个方法？

5.1 使用 Promise.all

• 当你需要所有 Promise 都成功才能继续时。
• 例如：多个请求都成功后才能进行下一步操作。

5.2 使用 Promise.allSettled

• 当你需要知道所有 Promise 的最终状态（无论成功或失败）时。
• 例如：批量处理请求，需要知道每个请求的结果。

6. 实际应用示例

6.1 使用 Promise.all

const urls = ['/api/data1', '/api/data2', '/api/data3'];
const fetchData = async (url) => {
  const response = await fetch(url);
  return response.json();
};
try {
  const results = await Promise.all(urls.map(url => fetchData(url)));
  console.log('All requests succeeded:', results);
} catch (error) {
  console.error('One or more requests failed:', error);
}

6.2 使用 Promise.allSettled

const urls = ['/api/data1', '/api/data2', '/api/data3'];
const fetchData = async (url) => {
  try {
    const response = await fetch(url);
    return { status: 'fulfilled', value: await response.json() };
  } catch (error) {
    return { status: 'rejected', reason: error };
  }
};
const results = await Promise.allSettled(urls.map(url => fetchData(url)));
console.log('All requests completed:', results);

7. 总结

• Promise.all：适合所有 Promise 必须成功的场景，失败时会立即抛出错误。
• Promise.allSettled：适合需要知道所有 Promise 最终状态的场景，无论成功或失败。
• 两者的返回值都会严格按照传入的 Promise 顺序返回结果。

根据你的需求选择合适的方法，可以更高效地处理并发异步操作！

到此这篇关于深入理解JS中 Promise.all 和 Promise.allSettled 特性和区别应用场景分析的文章就介绍到这了,更多相关js Promise.all 和 Promise.allSettled内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论