なぜ `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: Type 'Promise<」が表示されます。 ;number>[]' はタイプ 'number[]' に割り当てることができません。」このエラーは、予期される型 (number[]) と実際の型 (Promise[]) が一致しないことを示します。この問題を解決するには、async await と Array.map がどのように相互作用するかを理解する必要があります。

問題

この問題は、次の配列を待機しようとしているために発生します。これは、単一の Promise を待つこととは異なります。 await を Promise ではないオブジェクトに適用すると、単に値が即座に返されます。この状況では、Promise オブジェクトの配列を待っているため、結果の値は配列自体 (Promise[]) になります。

解決策

このエラーを修正するには、Promise.all を利用して Promise[] 配列を単一の配列に変換します。 約束。 MDN ドキュメントによると、反復可能な引数内のすべての Promise が解決されると、Promise.all が解決されます。コードでは、反復可能な引数は arr.map によって返される Promise の配列です。

Promise.all を使用すると、Promise の配列が 1 つの 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 中国語 Web サイトの他の関連記事を参照してください。