在 Array.reduce 中正确使用 async

如何使用带有reduce的Promise以及如何在串行和并行处理之间进行选择

本文译自How to use async functions with Array.reduce in Javascript - Tamás Sallai 。

在第一篇文章中，我们介绍了async / await 如何帮助执行异步命令，但在异步处理集合时却无济于事。在本文中，我们将研究reduce函数，它是功能最丰富的集合函数，因为它可以模拟所有其他函数。

1. Array.reduce

Reduce 迭代地构造一个值并返回它，它不一定是一个集合。这就是名字的来源，因为它减少了收集到的值。

迭代函数获取先前的结果（ memo 在下面的示例中调用）以及当前值e。

以下函数对元素进行求和，从0开始（第二个参数 reduce）：

const arr = [1, 2, 3];

const syncRes = arr.reduce((memo, e) => {
	return memo + e;
}, 0);

console.log(syncRes);
// 6

memo	e	结果
0（初始）	1个	1个
1个	2	3
3	3	（最终结果）6

2. 异步 reduce

异步版本几乎相同，但每次迭代都会返回一个Promise，因此 memo 将是先前结果的Promise。迭代函数需要 await 它才能计算下一个结果：

// utility function for sleeping
const sleep = (n) => new Promise((res) => setTimeout(res, n));

const arr = [1, 2, 3];

const asyncRes = await arr.reduce(async (memo, e) => {
	await sleep(10);
	return (await memo) + e;
}, 0);

console.log(asyncRes);
// 6

memo	e	结果
0（初始）	1	Promise (1)
Promise (1)	2	Promise (3)
Promise (3)	3	（最终结果）Promise (6)

使用的结构async (memo, e) => await memo，reduce可以处理任何异步功能，并且可以对其进行await编辑。

3. 定时

当在 reduce 中并发时有一个有趣的属性。在同步版本中，元素被一对一处理，这并不奇怪，因为它们依赖于先前的结果。但是，当异步 reduce 运行时，所有迭代函数将开始并行运行，await memo仅在需要时才等待上一个结果。

3.1 await memo last

在上面的示例中，所有 sleep 并行执行 ，因为await memo使得函数等待上一个函数完成后执行。

const arr = [1, 2, 3];

const startTime = new Date().getTime();

const asyncRes = await arr.reduce(async (memo, e) => {
	await sleep(10);
	return (await memo) + e;
}, 0);

console.log(`Took ${new Date().getTime() - startTime} ms`);
// Took 11-13 ms

3.2 await memo first

但是当await memo最先出现时，这些函数按顺序运行：

const arr = [1, 2, 3];

const startTime = new Date().getTime();

const asyncRes = await arr.reduce(async (memo, e) => {
	await memo;
	await sleep(10);
	return (await memo) + e;
}, 0);

console.log(`Took ${new Date().getTime() - startTime} ms`);
// Took 36-38 ms

这种行为通常不是问题，这意味着不依赖于先前结果的所有内容都将立即被计算出来，只有依赖部分正在等待先前的值。

3.3 当并行很重要时

但是在某些情况下，提前做一些事情可能是不可行的。

例如，我有一段代码可以打印不同的PDF，并使用 pdf-lib 库将它们拼接到一个文件中。

实现 printPDF 并行运行资源密集型功能：

const result = await printingPages.reduce(async (memo, page) => {
	const pdf = await PDFDocument.load(await printPDF(page));

	const pdfDoc = await memo;

	(await pdfDoc.copyPages(pdf, pdf.getPageIndices()))
		.forEach((page) => pdfDoc.addPage(page));

	return pdfDoc;

}, PDFDocument.create());

我注意到当我有很多页面要打印时，它将占用过多的内存并减慢整个过程。

一个简单的更改，使 printPDF 调用等待上一个调用完成：

const result = await printingPages.reduce(async (memo, page) => {
	const pdfDoc = await memo;

	const pdf = await PDFDocument.load(await printPDF(page));

	(await pdfDoc.copyPages(pdf, pdf.getPageIndices()))
		.forEach((page) => pdfDoc.addPage(page));

	return pdfDoc;

}, PDFDocument.create());

4. 结论

reduce 函数很容易转换为异步函数，但是要弄清楚并行性可能很棘手。幸运的是，它很少破坏任何东西，但是在一些资源密集型或速率受限的操作中，了解如何调用函数至关重要。

推荐阅读

• 如何在 Array.forEach 中正确使用 Async

• 如何在 Array.filter 中正确使用 Async