非同期処理の書き方 | async/awaitの基本 | JavaScript 超完全入門 基本から発展までのすべて

現在作成中です。今後加筆修正してまいります。
スポンサーリンク
スポンサーリンク

非同期処理の書き方

JavaScriptの非同期処理は、従来はPromiseやthen/catchを使用して書くのが一般的でした。しかし、async/await構文が導入されたことで、非同期処理をよりシンプルで直感的に書くことができるようになりました。async/awaitを使うことで、同期的なコードと同じような形で非同期処理を記述でき、可読性が大幅に向上します。

async/awaitの基本的な使い方

asyncは関数を非同期関数にするためのキーワードで、その中でawaitを使うことで、Promiseが解決されるまで処理を待機することができます。非同期処理の結果を簡単に扱い、thenチェーンの代わりに一貫した書き方が可能になります。

async/awaitの基本構文

async function fetchData() {
    const result = await fetch('https://api.example.com/data');
    const data = await result.json();
    console.log(data);
}

fetchData();

この例では、fetchメソッドでAPIからデータを取得し、その後json形式でデータをパースしています。awaitを使うことで、非同期処理の結果が解決されるまで次の処理に進まず、同期的なコードと同様の流れで記述できます。

async/awaitの利点

async/awaitにはいくつかの利点があります：

利点 説明
可読性の向上 コードが同期的なフローに近い形で書けるため、ロジックの流れが明確で理解しやすくなります。
エラーハンドリングが簡単 try-catch文を使って、非同期処理のエラーを一箇所で処理することができ、catchの連鎖を避けられます。
Promiseチェーンの代替 Promiseチェーンの複雑さを軽減し、コードをより直感的に書けます。

エラーハンドリングとasync/await

非同期処理でエラーが発生した場合、try-catch構文を使うことで、エラーハンドリングが簡単に行えます。Promiseのcatchメソッドと同様に、エラーが発生するとcatchブロックが実行されます。

async/awaitでのエラーハンドリングの例

async function fetchData() {
    try {
        const result = await fetch('https://api.example.com/data');
        const data = await result.json();
        console.log(data);
    } catch (error) {
        console.error('エラーが発生しました:', error);
    }
}

fetchData();

この例では、fetchメソッドが失敗した場合、catchブロック内でエラーが処理されます。これにより、非同期処理のエラーハンドリングが簡潔かつ明確になります。

複数の非同期処理を書く

async/awaitを使うことで、複数の非同期処理を順番に実行する場合でも、コードがシンプルでわかりやすくなります。従来のPromiseチェーンでは、thenメソッドが複雑になることがありましたが、async/awaitを使うとそのような問題が解消されます。

複数の非同期処理を順番に実行する例

async function fetchAllData() {
    const result1 = await fetch('https://api.example.com/data1');
    const data1 = await result1.json();
    console.log('データ1:', data1);

    const result2 = await fetch('https://api.example.com/data2');
    const data2 = await result2.json();
    console.log('データ2:', data2);
}

fetchAllData();

この例では、2つのAPIリクエストを順番に処理し、それぞれの結果を取得しています。非同期処理が解決されるまでawaitで待機するため、処理の流れが自然で読みやすくなっています。

async/awaitとPromise.allの組み合わせ

async/awaitとPromise.allを組み合わせることで、複数の非同期処理を並行して実行し、全ての結果が揃うのを待つことができます。これにより、処理の並行性を保ちながらコードを直感的に書けます。

async/awaitとPromise.allを組み合わせた例

async function fetchAllData() {
    const [data1, data2] = await Promise.all([
        fetch('https://api.example.com/data1').then(res => res.json()),
        fetch('https://api.example.com/data2').then(res => res.json())
    ]);

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

fetchAllData();

この例では、Promise.allを使って2つの非同期処理を並行して実行し、結果をawaitで待機しています。これにより、複数の非同期処理を効率よく管理することが可能です。

まとめ

async/awaitを使うことで、JavaScriptの非同期処理を直感的に書くことができます。複雑なPromiseチェーンを避け、同期的なフローに近い形で非同期処理を記述できるため、可読性が大幅に向上します。また、try-catchを使ったエラーハンドリングもシンプルになり、非同期処理の管理が容易になります。

スポンサーリンク