JavaScript/await
表示
await
[編集]await は、非同期処理を簡潔に扱うために使用されるJavaScriptのキーワードです。async
関数内で使用することで、Promiseの解決を待ち、非同期処理を同期的に記述することができます。
構文
[編集]async function example() { const result = await someAsyncFunction(); console.log(result); }
説明
[編集]await
は、非同期処理を行うPromise
が解決(または拒否)されるのを待つために使用します。await
は必ずasync
関数内で使用しなければなりません。await
は、Promise
の解決値を取得し、その結果を次の行のコードで使用することができます。- 非同期処理が完了するまで次のコードの実行は停止せず、
await
の行だけが待機します。そのため、コードの可読性が向上します。
使用例
[編集]// async 関数と await を使用した非同期処理 async function fetchData() { const response = await fetch('https://api.example.com/data'); const data = await response.json(); console.log(data); } fetchData(); // 非同期にデータを取得し、結果を表示
注意点
[編集]await
はPromise
を返す関数に対してのみ使用できます。もしawait
の対象がPromise
でない場合、非同期処理は即座に完了します。await
を使用する際、非同期処理の結果が返されるまで次の行の処理は実行されません。ただし、非同期処理を非同期に実行したい場合は、Promise.all
やPromise.allSettled
といったメソッドを使用することが有効です。
// 非同期処理の並列実行 async function fetchMultipleData() { const response1 = fetch('https://api.example.com/data1'); const response2 = fetch('https://api.example.com/data2'); const [data1, data2] = await Promise.all([response1, response2]); console.log(data1, data2); } fetchMultipleData(); // 並列でデータを取得し、結果を表示
await
は Promise
の結果を取得する手段として非常に簡潔ですが、従来の then
メソッドを使った方法と同様の動作をします。await
を使うことでコードが同期的に見える一方で、then
は非同期にチェーンする形式で書かれます。
// then を使用した例 fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)); // await を使用した例 async function fetchDataWithAwait() { const response = await fetch('https://api.example.com/data'); const data = await response.json(); console.log(data); }
await
と try...catch
[編集]非同期処理で発生する可能性のあるエラーは、try...catch
文を使用して適切に処理することが推奨されます。await
は try...catch
と組み合わせることで、非同期処理のエラーを同期的に処理できます。
// try...catch を使用してエラーを捕える async function fetchDataWithErrorHandling() { try { const response = await fetch('https://api.example.com/data'); const data = await response.json(); console.log(data); } catch (error) { console.error('Error fetching data:', error); } } fetchDataWithErrorHandling(); // エラーが発生した場合、catch で処理される
await
はPromise
を返す関数の完了を待ちますが、他のコードをブロックすることはありません。非同期処理を待っている間に、他のタスクが並行して実行されます。- 非同期関数が終了すると、結果を返すか、エラーをスローします。エラーが発生した場合、
try...catch
で捕えることができます。