JavaScriptで配列を元に非同期処理を実行する際の方法色々

2021/03/21に公開

何かと使うけど、よく忘れるのでメモ。

並行実行

配列の各要素をもとに、並行で非同期処理を実行する場合はPromise.all, mapを使います。

index.ts
class ApiClient {
  get(query: string) {
    return new Promise((resolve, _) => setTimeout(
      () => {
        console.log(`run: ${query} query`)
        resolve("ok")
      }
      , Math.random() * 1000)
    )
  }
}

const main = async () => {
  const client = new ApiClient()
  const queries = ['apple', 'banana', 'lemon', 'grape']

  // 並行に非同期処理を実効
  await Promise.all(queries.map(async (query) => client.get(query)))
}

main()

結果はこちら。出力はqueriesで定義した配列の並び順とは異なる場合もあります。

$ ts-node index.ts
run: grape query
run: banana query
run: lemon query
run: apple query

逐次実行

配列の各要素をもとに、逐次非同期処理を実行する場合はfor 〜 ofを使います。

index.ts
class ApiClient {
  get(query: string) {
    return new Promise((resolve, _) => setTimeout(
      () => {
        console.log(`run: ${query} query`)
        resolve("ok")
      }
      , Math.random() * 1000)
    )
  }
}

const main = async () => {
  const client = new ApiClient()
  const queries = ['apple', 'banana', 'lemon', 'grape']

  // 直列に非同期処理を実効
  for(const query of queries) {
    await client.get(query)
  }
}

main()

結果はこちら。出力はqueriesで定義した配列の並び順と同様になります。

$ ts-node index.ts
run: apple query
run: banana query
run: lemon query
run: grape query

Discussion