フロントエンドで非同期処理をすると避けては通れないPromise。意外と奥が深いところがあります。そして、概要欄で「約束」した通り、攻略していただけたでしょうか。コードを書いているときに「この処理は本当に直列しなきゃいけないのか?」「もしかして並列でもできる?」「あ、あいつがPromise.allがあるって言ってたぞ！」なんて思い出していただけたら幸いです。
なお、本文中に記載しているコードは (一応) 動作検証をしています (したつもりです) が、万が一不具合があったり、より良い書き方をご存知の方がいらっしゃいましたらぜひお知らせください！
以上、いーちゃんでした！