web-dev-qa-db-ja.com

Array#map()内の非同期/待機

このコードでコンパイル時エラーが発生しています:

const someFunction = async (myArray) => {
    return myArray.map(myValue => {
        return {
            id: "my_id",
            myValue: await service.getByValue(myValue);
        }
    });
};

エラーメッセージ:

awaitは予約語です

なぜこのように使用できないのですか?

別の方法も試しましたが、同じエラーが発生します:

 const someFunction = async (myArray) => {
    return myArray.map(myValue => {
        const myNewValue = await service.getByValue(myValue);
        return {
            id: "my_id",
            myValue: myNewValue 
        }
    });
};
31
MyTitle

await関数内に直接ない場合はasyncを使用できないため、想像どおりにこれを行うことはできません。

ここで賢明なことは、mapに渡される関数を非同期にすることです。これは、mapがpromiseの配列を返すことを意味します。その後、Promise.allすべてのプロミスが戻ったときに結果を取得します。なので Promise.all自体がプロミスを返します。外部関数はasyncである必要はありません。

const someFunction = (myArray) => {
    const promises = myArray.map(async (myValue) => {
        return {
            id: "my_id",
            myValue: await service.getByValue(myValue)
        }
    });
    return Promise.all(promises);
}
60
lonesomeday

これは、mapの関数がasyncではないため、awaitを使用できないためです。 returnステートメントで。この変更でコンパイルします:

const someFunction = async (myArray) => {
    return myArray.map(async (myValue) => { // <-- note the `async` on this line
        return {
            id: "my_id",
            myValue: await service.getByValue(myValue)
        }
    });
};

Babel REPLで試してみてください

ですから、アプリの残りの部分を確認せずに推奨事項を提示することはできませんが、何をしようとしているかに応じて、inner関数を非同期にするまたは、このブロック用にいくつかの異なるアーキテクチャを考えてみてください。

更新:いつかトップレベルの待機が発生する可能性があります: https://github.com/MylesBorins/proposal-top-level-await

8
helb