非同期関数を利用したAPI呼び出し | async関数の実装 | JavaScript 超完全入門 基本から発展までのすべて

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

非同期関数を利用したAPI呼び出しとは？

JavaScriptでは、非同期関数（async関数）を使うことで、ネットワーク経由でAPIを呼び出し、その結果を待機するコードを簡単に書くことができます。awaitを利用することで、APIからのデータ取得やエラーハンドリングを直感的に行えるようになります。

基本的な非同期API呼び出し

async関数を使ったAPI呼び出しの基本的な流れは、fetchメソッドなどの非同期処理を実行し、その結果をawaitで待機するという形です。これにより、非同期処理が完了するまでの待機を簡潔に表現でき、Promiseチェーンを使う場合と比べて可読性が向上します。

非同期API呼び出しの基本構文

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('API呼び出しに失敗しました:', error);
    }
}

fetchData();

この例では、fetchメソッドでAPIを呼び出し、awaitを使ってその結果を待機しています。APIから返されたデータはJSON形式に変換され、その後コンソールに出力されます。エラーが発生した場合は、catchブロックで処理されます。

非同期関数を使うメリット

非同期関数を利用することで、以下のような利点があります：

利点 説明
可読性の向上 同期処理のようにコードを記述でき、非同期処理が直感的に理解しやすくなります。
エラーハンドリングが簡単 try-catchを使うことで、非同期処理のエラーを簡潔に処理できます。
Promiseチェーンを避けられる 複雑なPromiseチェーンが不要になり、コードのネストが浅くなります。

複数のAPI呼び出しを同時に行う

async関数では、Promise.allを使うことで複数のAPI呼び出しを並行して行うことができます。これにより、複数の非同期処理を同時に実行し、すべての処理が完了した後に結果を処理することが可能です。

Promise.allを使った複数のAPI呼び出しの例

async function fetchMultipleData() {
    try {
        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);
    } catch (error) {
        console.error('API呼び出しのいずれかに失敗しました:', error);
    }
}

fetchMultipleData();

この例では、Promise.allを使って2つのAPI呼び出しを並行して行い、その結果を同時に取得しています。どちらかのAPI呼び出しが失敗した場合でも、catchブロックでエラーが処理されます。

エラーハンドリングの強化

非同期関数を利用したAPI呼び出しでは、エラーハンドリングが重要です。APIリクエストが失敗したり、サーバーが応答しない場合、try-catchを使って適切にエラーをキャッチし、ユーザーに対してエラーメッセージを表示することができます。

エラーハンドリングを強化した例

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        
        if (!response.ok) {
            throw new Error('サーバーエラー: ' + response.status);
        }

        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('API呼び出しに失敗しました:', error);
    }
}

fetchData();

この例では、API呼び出しが正常に完了しなかった場合、response.okをチェックしてエラーをスローしています。これにより、サーバーエラーやネットワークエラーを適切に処理できます。

まとめ

非同期関数を利用することで、JavaScriptでのAPI呼び出しがシンプルで直感的になります。awaitを使うことで、非同期処理の結果を同期的なフローで扱うことができ、エラーハンドリングもtry-catchを使って簡単に管理できます。また、Promise.allを使った複数のAPI呼び出しやエラーチェックの強化なども、async関数を使うことで効果的に実現できます。

スポンサーリンク