Array.mapで非同期関数を扱う方法

基本形

const arr = [1, 2, 3];

const asyncRes = await Promise.all(arr.map(async (i) => {
	await sleep(10);
	return i + 1;
}));

console.log(asyncRes);
// 2,3,4

• Array.map()をPromise.allで囲むことでイテレータ全体が返ってくるのを待ちます。

FireStoreの例

この例では、Article一覧を取得し、Array.map関数の中で、Articleに紐づくWebsiteを取得しています。

async function get(limit = 20) {
  const articlesRef = await db.collection('articles').limit(limit).get()
  const articles = await Promise.all(articlesRef.docs.map(async (articleRef) => {
    const article = articleRef.data()
    // Reference型なので、取得するには get() すれば良い
    const websiteRef = await article.website_id.get()
    const website = websiteRef.data()

    return {
      description: article.description,
      image_url: article.image_url,
      title: article.title,
      url: article.url,
      website: website
    }
  }))
  return articles
}

参考

• How to use async functions with Array.map in Javascript