☰

Array.map で async await を使用する 質問する

tag-icon • tag-icon javascript typescript promise async-await ecmascript-2017
Array.map で async await を使用する 質問する

次のコードがあるとします:

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[]' に割り当てることができません。 型 'Promise<number> は型 'number' に割り当てることができません。

どうすれば解決できるでしょうか? どうすれば協力しasync awaitてArray.map作業できるでしょうか?

ベストアンサー1

ここでの問題は、awaitPromise ではなく、Promise の配列を試みていることです。これは期待どおりには動作しません。

渡されたオブジェクトがawaitPromise でない場合は、await解決を試みることなく、値をそのまますぐに返します。したがって、awaitここでは Promise ではなく配列 (Promise オブジェクトの配列) を渡したので、await によって返される値は単にその配列 (型) になりますPromise<number>[]。

おそらく、Promise.allによって返された配列を呼び出して、それを ing するmap前に単一の Promise に変換することになるでしょうawait。

によるMDNドキュメントPromise.all:

このPromise.all(iterable)メソッドは、反復可能な引数内のすべての 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が、ほとんどの場合 (この場合もほぼ間違いなく) は を使用するPromise.allのが望ましいでしょう。

おすすめ記事