for await of を使うとEslintに怒られるから、Promise.all()を使う

はじめに

TypeScript + Eslint で開発中にfor await ofを使って、非同期関数を同期的にループで実行しようとしたら、Eslintに怒られました。
その際の、解決策として、Promise.all()で解決する方法をご紹介します。^[1]

訂正

解決策は、僕の憶測が入ってしまっていたため、適切なものではなかったことが判明したので、修正します。
厳密には、非同期に実行されるべきものを同期的にループで実行しようとしていることそのものをEslintに怒られていました。
以降の記述では、まるでPromise.all()が同期的な処理を行っているような表現をしていますが、Promise.all()は同期的に処理を実行するという記述はどのドキュメントにもありませんでした。m(_ _)m

前提

以下の関数が定義されていることとします。

functions.ts

async function createUser(userId: number, userName: string) {
    ︙
    ︙
}

async function deleteUser(userId: number) {
    ︙
    ︙
}

怒られる例

hogehoge.ts

// 同時に複数のユーザを同期的に作りたいとする
const USER_DATA_LIST = [
    { userId: 1, userName: "User1" }
    { userId: 2, userName: "User2" }
    { userId: 3, userName: "User3" }
    { userId: 4, userName: "User4" }
    { userId: 5, userName: "User5" }
]

for await (const userData of USER_DATA_LIST) {
    await createUser(userData.userId, userData.userName)
}

https://eslint.org/docs/rules/no-await-in-loop
ループ内でそもそもawait使うなって怒られます。

解決策

以下のように記述することで怒られなくなります。

Promise.all

fugafuga.ts

// 同時に複数のユーザを同期的に作りたいとする
const USER_DATA_LIST = [
    { userId: 1, userName: "User1" }
    { userId: 2, userName: "User2" }
    { userId: 3, userName: "User3" }
    { userId: 4, userName: "User4" }
    { userId: 5, userName: "User5" }
]

Promise.all(
    USER_DATA_LIST.map(userData => createUser(userData.userId, userData.userName))
)

Promise.all()は、非同期関数の配列を受け取ります（実態としてはプロミスを返す関数等の配列）。そこで、データ元の配列をmapしつつ、非同期関数を返すようにすることで、スマートに非同期処理の繰り返し実行が可能となります。同期処理ではありません。
スプレッド構文で、イミュータブルにするのも忘れずに。^[2]

応用編（誤った記述のため削除しました）

Promise.allでトランザクションっぽいことをしたい、という記述をしていましたが、上記でもあります通り、同期的な実行ではなく非同期的な実行であるため、トランザクションのような記述を簡単に書くことはできません。

番外編

Promise.allSettled

途中でいずれかの関数が失敗しても、残りの関数を実行したい場合は、Promise.allSettled()を使用します。
こちらのメソッドでは、すべての関数が実行完了するのを待って、結果を判定します。

fugahoge.ts

// 同時に複数のユーザを同期的に作りたいとする
const USER_DATA_LIST = [
    { userId: 1, userName: "User1" }
    { userId: 2, userName: "User2" }
    { userId: 3, userName: "User3" }
    { userId: 4, userName: "User4" }
    { userId: 5, userName: "User5" }
]

Promise.allSettled(
    USER_DATA_LIST.map(userData => createUser(userData.userId, userData.userName))
)
    .then(results => {
        console.log(results) // すべての関数から返された結果の配列
    })
    // errorはThrowされず、resultsの中で、エラー理由等が確認できる。

Promise.race

ここまで紹介してきたメソッドはすべて、同期的に関数を実行するものでしたが、非同期でまとめて実行させることもできます。
Promise.race()は、最も早く完了した関数の結果を返します。
ぱっと用途は思いつかないですが、覚えておくとどこかで役に立つかもしれません。

fugehoga.ts

// 同時に複数のユーザを同期的に作りたいとする
const USER_DATA_LIST = [
    { userId: 1, userName: "User1" }
    { userId: 2, userName: "User2" }
    { userId: 3, userName: "User3" }
    { userId: 4, userName: "User4" }
    { userId: 5, userName: "User5" }
]

Promise.race(
    USER_DATA_LIST.map(userData => createUser(userData.userId, userData.userName))
)
    .then(result => {
        console.log(result) // 最も早く終わった関数の結果が返ってくる
    })
    .catch(error => {
	console.log(error) // 最も早くエラーがthrowされた関数のエラーが返ってくる
    })

まとめ

今回は、Promise.all()と関連する、Promise.allSettled、Promise.raceについて紹介しました。
ぜひコーディンで採用して、スマートなコードを書いてみてください。

最後まで読んでいただき、ありがとうございました。

脚注

1. petamorikenさんにご指摘いただき、訂正します。

2. petamorikenさんにご指摘いただき、削除しました。