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

updated Jul 19, 2021created Jul 19, 2021

基本形

js
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を取得しています。

js
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 }

参考