コンテンツにスキップ

JavaScript/await

出典: フリー教科書『ウィキブックス(Wikibooks)』


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();  // 非同期にデータを取得し、結果を表示

注意点

[編集]
  • awaitPromise を返す関数に対してのみ使用できます。もし await の対象が Promise でない場合、非同期処理は即座に完了します。
  • await を使用する際、非同期処理の結果が返されるまで次の行の処理は実行されません。ただし、非同期処理を非同期に実行したい場合は、Promise.allPromise.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();  // 並列でデータを取得し、結果を表示

awaitPromise の結果を取得する手段として非常に簡潔ですが、従来の 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);
}

非同期処理で発生する可能性のあるエラーは、try...catch 文を使用して適切に処理することが推奨されます。awaittry...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 の挙動

[編集]
  • awaitPromise を返す関数の完了を待ちますが、他のコードをブロックすることはありません。非同期処理を待っている間に、他のタスクが並行して実行されます。
  • 非同期関数が終了すると、結果を返すか、エラーをスローします。エラーが発生した場合、try...catch で捕えることができます。

関連項目

[編集]

参考

[編集]