awaitを使った非同期処理の制御と実践例をわかりやすく解説

2024.09.12
スポンサーリンク
スポンサーリンク

awaitの概要

非同期処理の制御 JavaScript予約語

await

概要 awaitは、JavaScriptの非同期処理を簡潔に記述するために使用されるキーワードで、async関数内でのみ使用できます。

わかりやすく説明 awaitは「この処理が終わるまで待つ」という指示を出します。
  • awaitはPromiseを解決するまで非同期処理を一時停止します。
  • 処理が完了した結果を直接取得することができます。
  • async関数内でしか使用できません。

awaitの基本的な使い方

以下は、awaitを使用して非同期処理を直列的に実行する基本的な例です。

// awaitを使用した基本例
async function fetchData() {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/1"); // APIを呼び出し
    const data = await response.json(); // JSONデータを取得
    console.log(data); // データを出力
}

fetchData();
  • fetchでAPIを呼び出し、その結果をawaitで待機します。
  • 処理が終了するとPromiseの結果をdataとして受け取れます。

複数のawaitを使用した処理の連続実行

複数の非同期処理をawaitで直列的に実行する例を示します。

// 直列的な非同期処理
async function processSequential() {
    const data1 = await fetch("https://jsonplaceholder.typicode.com/posts/1").then(res => res.json());
    console.log("データ1:", data1);

    const data2 = await fetch("https://jsonplaceholder.typicode.com/posts/2").then(res => res.json());
    console.log("データ2:", data2);
}

processSequential();
  • 1つの処理が完了してから次の非同期処理を開始します。
  • 処理の順序が重要な場合に適しています。

非同期処理の並列実行

複数の非同期処理を同時に開始し、それらの結果を待つ方法を示します。

// 並列実行の例
async function processParallel() {
    const [data1, data2] = await Promise.all([
        fetch("https://jsonplaceholder.typicode.com/posts/1").then(res => res.json()),
        fetch("https://jsonplaceholder.typicode.com/posts/2").then(res => res.json())
    ]);

    console.log("データ1:", data1);
    console.log("データ2:", data2);
}

processParallel();
  • Promise.allを使用して複数の非同期処理を同時に実行します。
  • 全ての処理が完了するまでawaitが待機します。

例外処理との組み合わせ

try...catchを使用して、非同期処理中の例外をキャッチする方法を示します。

// 非同期処理の例外処理
async function fetchDataWithErrorHandling() {
    try {
        const response = await fetch("https://invalid.url"); // 無効なURL
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("エラーが発生しました:", error.message);
    }
}

fetchDataWithErrorHandling();
  • try...catchで非同期処理中のエラーをキャッチできます。
  • エラーメッセージをログに出力するなど、適切なエラーハンドリングを実装します。

注意点

  • async関数内でのみ使用可能: awaitはasync関数外では使用できません。
  • 直列実行と並列実行を使い分ける: 処理の依存関係や効率を考慮して、awaitの使い方を選びます。
  • Promise.allでのエラー: Promise.allはどれか1つの処理が失敗すると全体がエラーとなるため、適切なエラーハンドリングが必要です。

よくある質問

Q: awaitはどこで使用できますか？
A: awaitはasync関数内でのみ使用可能です。関数外で使用すると構文エラーになります。
Q: awaitはスレッドをブロックしますか？
A: いいえ、awaitは非同期的に動作し、スレッドをブロックしません。他のコードは引き続き実行されます。
Q: 非同期処理が不要な場合でもawaitを使用すべきですか？
A: 非同期処理が不要な場合はawaitを省略できます。ただし、一貫性の観点からawaitを使用しても問題ありません。

まとめ

awaitは、非同期処理を簡潔に記述し、コードの可読性を向上させる強力なツールです。

  • 非同期処理の直列実行と並列実行を適切に使い分けましょう。
  • try...catchを活用してエラーハンドリングを実装しましょう。
  • Promiseと組み合わせて、効率的な非同期コードを書くことができます。
スポンサーリンク