为什么 `await arr.map()` 失败，`Promise.all` 如何修复它？

了解 Async Await 和 Array.map Synergy

在代码片段中：

var arr = [1,2,3,4,5];

var results: number[] = await arr.map(async (item): Promise<number> => {
    await callAsynchronousOperation(item);
    return item + 1;
});

您会收到错误“TS2322：键入“Promise<” ;number>[]' 不可分配给类型 'number[]'”。此错误表示预期类型 (number[]) 和实际类型 (Promise[]) 之间不匹配。为了解决这个问题，我们需要了解 async wait 和 Array.map 是如何交互的。

问题

问题的出现是因为你试图等待一个数组Promise (Promise[])，这与等待单个 Promise 不同。当应用于非 Promise 的对象时，await 只是立即返回值。在这种情况下，由于您正在等待 Promise 对象数组，因此结果值是数组本身 (Promise[])。

解决方案

要纠正此错误，您可以使用 Promise.all 将 Promise[] 数组转换为单个 Promise。根据 MDN 文档，一旦可迭代参数中的所有 Promise 都得到解析，Promise.all 就会解析。在代码中，可迭代参数是 arr.map 返回的 Promise 数组。

通过使用 Promise.all，您可以将 Promise 数组转换为单个 Promise，从而使您能够等待所有 Promise 的解决

var arr = [1, 2, 3, 4, 5];

var results: number[] = await Promise.all(arr.map(async (item): Promise<number> => {
    await callAsynchronousOperation(item);
    return item + 1;
}));

或者，根据您的具体用途考虑使用 Promise.allSettled、Promise.any 或 Promise.race 案件。但是，对于您提供的场景，Promise.all 仍然是最合适的选择。

以上是为什么 `await arr.map()` 失败，`Promise.all` 如何修复它？的详细内容。更多信息请关注PHP中文网其他相关文章！