async/await

[ˈeɪsɪŋk əˈweɪt] エイシンク アウェイト

1. 非同期処理をより簡潔に記述するためのJavaScriptの構文。

JavaScriptなどのプログラミング言語で、時間のかかる処理（ネットワークリクエストやファイル読み込みなど）をバックグラウンドで実行しつつ、その結果を待つ際にコールバック関数を多用することなく、あたかも同期的にコードが上から下に実行されるかのように書くための特別なキーワードです。これにより、コードの可読性が大幅に向上します。

async function fetchData() { const response = await fetch('https://api.example.com/data'); const data = await response.json(); console.log(data); } (fetchData 関数を非同期関数として定義し、APIからデータを取得し、その結果をログに出力します。)

• async function fetchData(): fetchDataという名前の非同期関数を定義します。この関数内ではawaitキーワードを使用できます。
• const response = await fetch('https://api.example.com/data');: 指定されたURLからデータを非同期で取得します。awaitにより、データが取得されるまでこの行の実行が一時停止されます。
• const data = await response.json();: 取得したレスポンスをJSON形式に変換します。これも非同期処理であり、変換が完了するまで一時停止します。
• console.log(data);: 最終的に取得したデータをコンソールに出力します。

async function getUser() { try { const user = await database.findUser(userId); console.log(user); } catch (error) { console.error("Error fetching user:", error); } } (getUser 関数内でユーザー情報を取得し、エラーが発生した場合はそれをキャッチして表示します。)

• async function getUser(): getUserという名前の非同期関数を定義します。
• try { ... } catch (error) { ... }: 非同期処理で発生しうるエラーを捕捉するための構文です。
• const user = await database.findUser(userId);: データベースから指定されたIDのユーザーを非同期で検索します。結果が返るまで待機します。
• console.log(user);: 取得したユーザー情報をコンソールに出力します。
• console.error("Error fetching user:", error);: ユーザー情報の取得中にエラーが発生した場合、エラーメッセージをコンソールに表示します。

async function getMultipleData() { const [data1, data2] = await Promise.all([fetch('/api/data1'), fetch('/api/data2')]); console.log(data1, data2); } (複数のAPIからデータを並行して取得し、すべてが完了するまで待ち、その結果を表示します。)

• async function getMultipleData(): getMultipleDataという名前の非同期関数を定義します。
• const [data1, data2] = await Promise.all([fetch('/api/data1'), fetch('/api/data2')]);: 複数のPromise（この場合はfetch呼び出し）がすべて解決するのを待ちます。すべての処理が並行して実行され、すべて完了した時点で次の行に進みます。
• fetch('/api/data1'): 最初のAPIエンドポイントからデータを取得するPromiseです。
• fetch('/api/data2'): 2番目のAPIエンドポイントからデータを取得するPromiseです。
• console.log(data1, data2);: 取得した両方のデータをコンソールに出力します。

関連

• Promise
• Callback hell
• Asynchronous programming
• Synchronous programming
• JavaScript
• Concurrency
• Event loop