学ぶ Async/Awaitを使用したよりクリーンな非同期コード

メニューを表示するにはスワイプしてください

async/await 構文は、JavaScriptでPromiseを扱うための最新で可読性の高い方法。非同期コードを同期コードのように記述・動作させることが可能。then() の連鎖を使う代わりに、await を用いて async 関数内の実行をPromiseが解決されるまで一時停止できる。

async関数の仕組み

async キーワードで宣言された関数は async 関数。デフォルトでPromiseを返し、その中で await キーワードを使うことで、Promiseが解決されるまで実行を一時停止できる。

index.html

index.js

fetchData 関数は async として宣言されており、await を使用してプロミスが解決されるまで実行を一時停止できます。ここでは、2秒間の遅延をシミュレートしてデータ取得操作を模倣しています。解決後、結果（"Data fetched successfully!"）がHTMLの段落に表示されます。

Async/AwaitによるPromiseチェーンの簡素化

複数の非同期処理を順番に実行する場合、async/await を使うことで、then() を用いたプロミスチェーンよりもコードを簡潔にできます。

データの取得や処理など、一連のプロミスを async/await でどのようにより分かりやすく扱えるかを見てみましょう。

index.html

index.js

processData 関数は、3つの非同期関数（fetchData、processFetchedData、displayProcessedData）を順番に呼び出し、それぞれ前の処理が完了するまで（await）待機します。この構造化されたフローにより、Promiseのチェーンが不要となり、可読性が向上します。最終的な出力（「Raw Data processed and displayed on the page」）はHTMLに表示されます。

Async/Await における try...catch を使ったエラー処理

複数の非同期処理を含むPromiseチェーンで .catch() を使ったエラー処理は煩雑になりがちです。async/await を使うことで、従来の try...catch ブロックによるエラー処理が可能となり、より直感的で可読性の高いエラー処理が実現できます。

index.html

index.js

fetchDataWithError では、try ブロック内で await 操作が実行され、成功した場合は結果がHTMLに表示されます。エラーが発生した場合（simulateError によるシミュレーション）、catch ブロックがそれを処理し、段落テキストをエラーメッセージ（"Error: Something went wrong!"）に設定します。