年末に社内向けには共有していた話ではあるのですが、公開記事として記録を残しておきます。
とあるシステムにて、map の中のループの中でやっている3種類のボタンクリック処理を順番に実行してほしかっただけなのですが、なかなか思い通りに動かなかったのでメモを残しておきます。
- Promise チェーンはチェーンの内部でしか実行順番が保証されない。チェーンの上部で非同期のループを回してしまうと、複数の Promise チェーンが並列実行されることになる。
- Promise.all は全部の処理が終わっていることは確認してくれるが、内部の処理が順番に実行されるとは限らない。
- 普通の for の中で await を書くのが簡単。
このあたりの詳細については以下の記事が分かりやすいのでお勧めです。
https://zenn.dev/sora_kumo/articles/612ca66c68ff52
今すぐに理解できなくとも、非同期処理の問題だと知っていれば、問題解決までの時間が短縮されるので、まずは知っていることが重要かと思います。