タイトル通り、map() のループ処理内で await を使用する方法です。
正直、これができなくて別の方法を使ってみたりと結構悩んでいたので、解決できてかなり助かりました…！
参考にさせていただいた記事はこちら。
mapのループ内でawaitしたいのに怒られてはまった件 – Qiita
https://qiita.com/yakipudding/items/4570eb453d0b853e0b26
解決策は 2つありましたが、私は Promise.all を使う方法を採用しました。
サンプルコードは下記のとおりです。
const promises = memberIds.map(memberId => {
return getMemberData(memberId);
});
const members = await Promise.all(promises);
ちなみに、getMemberData() 関数は下記のように指定しています。
async getMemberData(memberId) {
.......
return {[会員情報]}
}
変数 memberIds に会員ID を配列で持っているので、こちらを map() メソッドでループし、getMemberData() 関数を呼び出して会員情報を取得する処理を記述します。
なお、ここではまだ getMemberData() 関数からデータを取得していないようです。
で、最後に await Promise.all(promises) を実行することで、会員ID ごとに順次 getMemberData() 関数を呼び出し、結果を変数 members に格納していきます。
…正直説明がかなり下手なので、是非上記サイトをご参照ください！
なお、2つ目の方法としては、map() ではなく for() を使う方法が挙げられていました。
こちらは特に難しい記述をしなくても良いので、実装は簡単ですね。
…ただ、ちょっとコードがダサくなる＆長くなるので、個人的には最終手段にしたいところです。
ですが、Promise.all での記述が想定通りに動作してくれたので、今回は for() を使わずに済みました。
以上、JavaScript の map() メソッド内で await を使用する方法でした。
正直、参考サイトのコードをコピーしただけで、いまいち内容を理解できていないので…時間を見つけて理解できるようにしたいと思います。
ご参考になれば幸いです。
