浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【JavaScript】map()メソッド内でawaitを使用する

タイトル通り、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 を使用する方法でした。
正直、参考サイトのコードをコピーしただけで、いまいち内容を理解できていないので…時間を見つけて理解できるようにしたいと思います。
ご参考になれば幸いです。

  • この記事いいね! (0)