基于 Promise 的并发控制：`Promise.all` 与 `Promise.allSettled`

Promise 界的“华山论剑”：`Promise.all` 与 `Promise.allSettled`，谁才是并发控制的“真英雄”？

各位观众老爷们，大家好！欢迎来到今天的“Promise 武林大会”！我是你们的老朋友，江湖人称“代码诗人”的李白（化名）。今天我们要聊的是 Promise 界的两位重量级选手：Promise.all 和 Promise.allSettled。他们都肩负着并发控制的重任，但性格迥异，招式不同。今天，我们就来一场酣畅淋漓的 “华山论剑”，看看谁才是并发控制的“真英雄”！

(开场白，调动气氛，奠定轻松幽默的基调)

一、江湖恩怨：为什么要并发控制？

在进入正题之前，我们先来聊聊江湖恩怨…啊不，是并发控制的必要性。想象一下，你正在开发一个电商网站，用户下单后，需要同时执行以下操作：

扣减商品库存
生成订单
发送短信通知用户
增加用户积分

如果这些操作串行执行，那用户得等到猴年马月才能收到短信，体验感简直糟糕透顶！就像等着一碗“老坛酸菜牛肉面”，结果等来的是“老坛酸菜方便面”，还是过期那种！ 🍜

因此，我们需要并发执行这些操作，让它们齐头并进，提高效率，提升用户体验。这就是并发控制的意义所在。

(用生动的例子说明并发控制的重要性，增加趣味性)

二、两位英雄的登场：`Promise.all` 和 `Promise.allSettled`

好了，废话不多说，让我们隆重请出今天的主角：

“铁面判官” Promise.all： 他嫉恶如仇，眼里容不得沙子。只要有一个 Promise rejected，他就会立即判决失败，毫不留情。
“慈悲圣手” Promise.allSettled： 他心怀慈悲，无论 Promise fulfilled 还是 rejected，他都会耐心等待，收集所有结果，然后给出最终判决。

(用形象的比喻介绍两位主角的性格和特点)

让我们先来看看他们的基本用法：

1. Promise.all：

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3])
  .then((values) => {
    console.log(values); // Output: [3, 42, 'foo']
  })
  .catch((error) => {
    console.error("Promise.all failed!", error);
  });

代码解释：

Promise.all 接收一个 Promise 数组作为参数。
它会等待数组中所有的 Promise 都 fulfilled，然后将所有 Promise 的 fulfilled 值按照数组的顺序返回。
重点： 如果数组中任何一个 Promise rejected，Promise.all 就会立即 rejected，并返回第一个 rejected Promise 的 reason。

2. Promise.allSettled：

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];

Promise.allSettled(promises)
  .then((results) => results.forEach((result) => console.log(result)));

// Output:
// { status: 'fulfilled', value: 3 }
// { status: 'rejected', reason: 'foo' }

代码解释：

Promise.allSettled 同样接收一个 Promise 数组作为参数。
它会等待数组中所有的 Promise 都 settled (fulfilled 或 rejected)。
它会返回一个包含所有 Promise 结果的数组。每个结果对象都有一个 status 属性，表示 Promise 的状态（'fulfilled' 或 'rejected'），以及一个 value 属性（如果 fulfilled）或 reason 属性（如果 rejected）。

(清晰的代码示例和解释，帮助读者理解基本用法)

用表格对比一下他们的特点：

特性	`Promise.all`	`Promise.allSettled`
成功条件	所有 Promise 都 fulfilled	所有 Promise 都 settled (fulfilled 或 rejected)
失败条件	任何一个 Promise rejected	无失败条件，始终返回一个包含所有结果的数组
返回值	Promise 数组中所有 fulfilled 值组成的数组	一个包含所有 Promise 结果的数组，每个结果对象包含 `status` (fulfilled 或 rejected), `value` (如果 fulfilled) 或 `reason` (如果 rejected)
应用场景	所有 Promise 都必须成功才能继续的场景，例如：获取多个 API 接口的数据，只有所有接口都成功返回数据才能渲染页面。	需要知道所有 Promise 的执行结果，无论成功或失败的场景，例如：批量上传文件，需要知道哪些文件上传成功，哪些文件上传失败。
容错性	较低，任何一个失败都会导致整个操作失败。	较高，允许部分 Promise 失败，不会影响其他 Promise 的执行。
适用版本	ES6	ES2020

(用表格清晰地对比两者的特性，方便读者理解)

三、招式拆解：`Promise.all` 的 “一荣俱荣，一损俱损”

Promise.all 的招式可以用八个字概括：“一荣俱荣，一损俱损”。它就像一支训练有素的军队，必须所有士兵都到达终点，才能算完成任务。如果有一个士兵掉队了（rejected），整个队伍就会停止前进。

(形象的比喻，加深读者对 Promise.all 特性的理解)

优点：

简单直接： 用法简单，易于理解和使用。
效率较高： 只要有一个 Promise rejected，就会立即停止，避免不必要的等待。

缺点：

容错性差： 任何一个 Promise rejected 都会导致整个操作失败，影响用户体验。
不适用于所有场景： 不适用于需要容错处理的场景，例如：批量上传文件，即使部分文件上传失败，也应该允许其他文件继续上传。

适用场景：

依赖性强的操作： 例如，获取多个 API 接口的数据，只有所有接口都成功返回数据，才能渲染页面。
事务性操作： 例如，数据库事务，要么全部成功，要么全部失败。

(总结 Promise.all 的优缺点和适用场景，帮助读者选择合适的工具)

四、招式拆解：`Promise.allSettled` 的 “海纳百川，有容乃大”

Promise.allSettled 的招式可以用八个字概括：“海纳百川，有容乃大”。它就像一位经验丰富的船长，无论遇到风浪还是晴空万里，都会尽力将所有船只安全送达目的地。

(形象的比喻，加深读者对 Promise.allSettled 特性的理解)

优点：

容错性高： 允许部分 Promise 失败，不会影响其他 Promise 的执行。
适用性广： 适用于需要容错处理的场景，例如：批量上传文件，即使部分文件上传失败，也应该允许其他文件继续上传。
提供详细信息： 返回所有 Promise 的状态和结果，方便进行错误处理和日志记录。

缺点：

代码相对复杂： 需要处理每个 Promise 的状态和结果，代码相对复杂。
效率相对较低： 需要等待所有 Promise 都 settled，即使部分 Promise 已经 rejected。

适用场景：

需要容错处理的操作： 例如，批量上传文件，即使部分文件上传失败，也应该允许其他文件继续上传。
需要知道所有 Promise 的执行结果的场景： 例如，监控多个服务的状态，需要知道哪些服务正常运行，哪些服务出现故障。
并发请求，但是个别请求失败不影响主流程的场景：比如首页加载，需要获取多个模块的数据，个别模块数据获取失败不影响其他模块的展示。

(总结 Promise.allSettled 的优缺点和适用场景，帮助读者选择合适的工具)

五、实战演练：案例分析

光说不练假把式，接下来，我们通过几个实战案例来加深理解：

案例一：批量上传文件

async function uploadFiles(files) {
  const uploadPromises = files.map(file => uploadFile(file)); // 假设 uploadFile 是一个上传文件的 Promise 函数

  Promise.allSettled(uploadPromises)
    .then(results => {
      const successfulUploads = results.filter(result => result.status === 'fulfilled');
      const failedUploads = results.filter(result => result.status === 'rejected');

      console.log('上传成功的文件：', successfulUploads.length);
      console.log('上传失败的文件：', failedUploads.length);

      // 可以根据结果进行后续处理，例如：显示上传结果，重试上传失败的文件等
    });
}

分析：

使用 Promise.allSettled 可以确保即使部分文件上传失败，也不会影响其他文件的上传。
可以根据 results 数组中的 status 属性来判断文件上传是否成功，并进行相应的处理。

案例二：获取多个 API 接口的数据并渲染页面

async function fetchDataAndRender() {
  const api1Promise = fetch('/api/data1');
  const api2Promise = fetch('/api/data2');
  const api3Promise = fetch('/api/data3');

  Promise.all([api1Promise, api2Promise, api3Promise])
    .then(async ([data1, data2, data3]) => {
      // 所有 API 接口都成功返回数据，渲染页面
      renderPage(data1, data2, data3);
    })
    .catch(error => {
      // 任何一个 API 接口返回错误，显示错误信息
      console.error('Failed to fetch data', error);
      displayErrorMessage('Failed to load data. Please try again later.');
    });
}

分析：

使用 Promise.all 可以确保只有所有 API 接口都成功返回数据，才渲染页面。
如果任何一个 API 接口返回错误，则显示错误信息。

案例三：优化首页加载速度 (混合使用 Promise.all 和 Promise.allSettled)

假设首页需要加载三个模块：轮播图、商品列表、推荐文章。轮播图是关键模块，必须加载成功，否则影响用户体验。商品列表和推荐文章是辅助模块，即使加载失败，也不应该阻止轮播图的展示。

async function loadHomePage() {
  const bannerPromise = loadBanner(); // 加载轮播图
  const productListPromise = loadProductList(); // 加载商品列表
  const articlesPromise = loadArticles(); // 加载推荐文章

  // 优先加载轮播图
  Promise.all([bannerPromise])
    .then(() => {
      console.log("轮播图加载成功");
      // 轮播图加载成功后，再加载商品列表和推荐文章
      Promise.allSettled([productListPromise, articlesPromise])
        .then(results => {
          const productListResult = results[0];
          const articlesResult = results[1];

          if (productListResult.status === 'fulfilled') {
            renderProductList(productListResult.value);
          } else {
            console.error("商品列表加载失败", productListResult.reason);
            displayProductListErrorMessage(); // 显示商品列表加载失败的提示
          }

          if (articlesResult.status === 'fulfilled') {
            renderArticles(articlesResult.value);
          } else {
            console.error("推荐文章加载失败", articlesResult.reason);
            displayArticlesErrorMessage(); // 显示推荐文章加载失败的提示
          }
        });
    })
    .catch(error => {
      console.error("轮播图加载失败", error);
      displayBannerErrorMessage(); // 显示轮播图加载失败的提示，并阻止页面渲染
    });
}

分析：

首先使用 Promise.all 加载轮播图，确保关键模块加载成功。
然后使用 Promise.allSettled 加载商品列表和推荐文章，即使加载失败，也不会影响轮播图的展示。
这种混合使用的方式可以兼顾用户体验和页面性能。

(通过三个实战案例，展示了 Promise.all 和 Promise.allSettled 在不同场景下的应用，加深读者对实际应用场景的理解)

六、总结：选择适合你的“武器”

经过今天的“华山论剑”，相信大家对 Promise.all 和 Promise.allSettled 都有了更深入的了解。他们就像两把锋利的宝剑，各有千秋，各有优势。

Promise.all： 适合于对错误零容忍，所有 Promise 必须成功的场景。就像一把 “倚天剑”，锋芒毕露，斩妖除魔。
Promise.allSettled： 适合于需要容错处理，即使部分 Promise 失败，也不影响其他 Promise 执行的场景。就像一把 “屠龙刀”，厚重沉稳，海纳百川。

选择哪把“武器”，取决于具体的应用场景和需求。记住，没有最好的工具，只有最适合你的工具！ 💪

(总结全文，强调选择合适的工具的重要性，并用形象的比喻再次加深读者的印象)

七、延伸思考：`Promise.any` 和 `Promise.race`

除了 Promise.all 和 Promise.allSettled，Promise 家族还有两位成员：Promise.any 和 Promise.race。

Promise.any： 只要有一个 Promise fulfilled，就返回第一个 fulfilled Promise 的值。如果所有 Promise 都 rejected，则抛出一个 AggregateError 错误。
Promise.race： 返回第一个 settled (fulfilled 或 rejected) Promise 的值。

这两个方法的使用场景相对较少，但也在某些特定场景下非常有用。例如，可以使用 Promise.race 设置超时时间，如果 Promise 在指定时间内没有 settled，则返回一个 rejected Promise。

(简单介绍 Promise.any 和 Promise.race，扩展读者的知识面)

八、结束语

今天的“Promise 武林大会”就到此结束了。希望今天的讲解能够帮助大家更好地理解和使用 Promise.all 和 Promise.allSettled，在并发控制的道路上披荆斩棘，勇攀高峰！下次再见！ 👋

(结尾，感谢观众，并期待下次再见)

Promise 界的“华山论剑”：Promise.all 与 Promise.allSettled，谁才是并发控制的“真英雄”？

一、江湖恩怨：为什么要并发控制？

二、两位英雄的登场：Promise.all 和 Promise.allSettled

三、招式拆解：Promise.all 的 “一荣俱荣，一损俱损”

四、招式拆解：Promise.allSettled 的 “海纳百川，有容乃大”

五、实战演练： 案例分析

六、 总结：选择适合你的“武器”

七、 延伸思考：Promise.any 和 Promise.race

八、 结束语

发表回复 取消回复

Promise 界的“华山论剑”：`Promise.all` 与 `Promise.allSettled`，谁才是并发控制的“真英雄”？

二、两位英雄的登场：`Promise.all` 和 `Promise.allSettled`

三、招式拆解：`Promise.all` 的 “一荣俱荣，一损俱损”

四、招式拆解：`Promise.allSettled` 的 “海纳百川，有容乃大”

五、实战演练：案例分析

六、总结：选择适合你的“武器”

七、延伸思考：`Promise.any` 和 `Promise.race`

八、结束语

发表回复取消回复