非同期処理(Promise / async・await)

このレッスンでは、JavaScriptの非同期処理(Promise・async/await)の基本を学び、通信などの時間がかかる処理を正しく扱えるようになることを目標にします。「JavaScript async await 使い方」「JavaScript Promise とは」で調べている方向けです。

時間がかかる処理(通信など)を扱うとき、JavaScriptではPromiseという仕組みを使います。asyncを付けた関数の中ではawaitを使って、Promiseの結果が返るまで「待つ」ことができます。「注文を出してから料理が届くまで待つ」ような、時間差のある処理を表現する仕組みです。awaitを使わないと、処理の完了を待たずに次のコードが実行されてしまいます。

サンプルコードでは、指定した時間だけ待つwait関数をPromiseで作り、main関数の中でawait wait(300)として300ミリ秒待っています。実行すると、少し時間をおいてから2行目が表示されるのを確認できます。main()の呼び出しにもawaitを付けて、完了を待ってから次の処理に進んでいる点にも注目してください。

初心者がよくつまずくのが、awaitを関数の外や、asyncが付いていない関数の中で使おうとしてエラーになるケースです。awaitはasync関数の中でしか使えないというルールを覚えておきましょう。また、非同期処理の完了を待たずに結果を使おうとして、意図しないundefinedが返ってくるバグも初心者に多いつまずきポイントです。

実際の開発現場では、APIからデータを取得する、ファイルを読み込む、一定時間後に処理を実行するなど、あらゆる通信・待機処理がPromiseとasync/awaitで書かれています。API通信を伴うWebアプリを作るうえで、この非同期処理の考え方は避けて通れない重要な基礎知識です。

複数の非同期処理を同時に実行して、すべての完了を待ちたい場合はPromise.all([処理1, 処理2])という書き方が使われます。1つずつ順番にawaitするより速く、複数のAPI通信を並行して行いたいときによく使われるテクニックです。

awaitした処理でエラーが発生した場合は、通常のtry...catchで受け止められます。非同期処理と同期処理のエラーハンドリングが同じ書き方でできる点も、async/awaitがPromiseの直接的な書き方より好まれる理由の1つです。