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で捕えることができます。