洞悉Promise的all、race、allSettled等方法揭开谜底

2024-01-06 09:30:23

在当今快速发展的科技时代，JavaScript作为一种广泛使用的编程语言，其不断演进的特性使其保持着强大的生命力。在ES6版本中，Promise的引入为异步编程带来了巨大便利，而all、race、allSettled等方法的出现更是锦上添花，让Promise的使用更加灵活和高效。本文将深入剖析这几个方法的实现与应用，助您全面掌握Promise的进阶用法。

1. Promise.all

Promise.all方法用于将多个Promise对象包装成一个新的Promise对象，并且只有当所有包含的Promise对象都成功完成后，此新的Promise对象才会成功，否则，一旦其中任何一个Promise对象失败，此新的Promise对象也会失败。

2. Promise.race

Promise.race方法与Promise.all方法非常相似，不同之处在于，它只关心第一个完成的Promise对象，无论成功还是失败，此新的Promise对象都会立即完成，而其余的Promise对象将被忽略。

3. Promise.allSettled

Promise.allSettled方法是Promise.all方法的升级版，它将所有包含的Promise对象包装成一个新的Promise对象，无论每个包含的Promise对象是成功还是失败，它都会等待所有包含的Promise对象完成，然后返回一个包含所有Promise对象最终状态的新数组。

Promise方法间的区别

方法	特性	应用场景
Promise.all	等待所有包含的Promise对象成功完成后才成功	多个并行请求都需要成功时
Promise.race	只关心第一个完成的Promise对象	竞争性请求场景，如抢占式请求
Promise.allSettled	等待所有包含的Promise对象完成并返回最终状态	汇总多个异步操作的结果，无论成功与否

了解了以上方法的用法后，我们来看一个实际的应用场景。假设我们有一个购物车页面，其中包含多个商品，每个商品都有自己的异步请求来获取详细信息。我们需要等待所有商品的详细信息都加载完成，然后才能显示购物车页面。

async function loadCartItems() {
  const items = [
    { id: 1, name: 'Product 1' },
    { id: 2, name: 'Product 2' },
    { id: 3, name: 'Product 3' }
  ];

  // 使用 Promise.all 来等待所有商品的详细信息加载完成
  const promises = items.map(item => getDetails(item.id));
  const results = await Promise.all(promises);

  // 将获取到的商品详细信息与商品数据合并
  const cartItems = items.map((item, index) => ({
    ...item,
    details: results[index]
  }));

  return cartItems;
}