JavaScriptでAPIを呼び出して結果をまとめて処理する方法

こんにちは、さるまりんです。

JavaScriptを用いてサーバ上のAPIを呼び出し、クライアント側でで処理するというのはよくあります。
複数のAPIを並行して呼び出して結果をまとめて処理する方法を考えてみます。

まずはシンプルに

APIを呼び出してデータを取得して処理するJavaScriptの例です。

async function fetchData() {
  try {
    // APIエンドポイントにGETリクエストを送信
    const response = await fetch('データ取得のためのURL');
    
    // レスポンスが正常でない場合はエラーを投げる
    if (!response.ok) {
      throw new Error(`Network response was not ok: ${response.statusText}`);
    }
    
    // レスポンスをJSON形式に変換
    const data = await response.json();
    
    console.log('取得したデータ:', data);
    return data;
  } catch (error) {
    console.error('Fetch error:', error);
    // 必要に応じてエラー処理を行う
    throw error;
  }
}

// 関数の呼び出し
fetchData().then(data => {
  // 取得したデータを使った処理。
  // ↓はただconsoleに結果を出力しています。
  console.log('データを受け取った後の処理:', data);
}).catch(error => {
  // こちらはエラー時の処理
  console.error('エラーが発生しました:', error);
});

パラレル(並列)に処理

上では一つのAPI呼び出しでしたが、今度は二つの呼び出しを並行してやってみます。

async function fetchData() {
  try {
    // 複数のfetch呼び出しを配列にまとめる
    const requests = [
      fetch('データ取得のためのURL1'),
      fetch('データ取得のためのURL2')
    ];

    // 並列でリクエストを実行し、すべて完了するのを待つ
    const responses = await Promise.all(requests);

    // 各レスポンスのエラーチェック
    responses.forEach(response => {
      if (!response.ok) {
        throw new Error(`Error: ${response.statusText}`);
      }
    });

    // すべてのレスポンスをJSONに変換する
    const data = await Promise.all(responses.map(response => response.json()));

    console.log('Parallel API results:', data);
    return data;
  } catch (error) {
    console.error('Parallel fetch error:', error);
    throw error;
  }
}

このコードではfetch呼び出しが同時に実行されるので、それぞれのAPIからの応答待ち時間を並列に処理できて、全体の処理時間が短くできる可能性があります。

一つの画面で複数のAPI呼び出しを行なって、その結果をまとめて画面上に表示していく必要があり、一つずつAPIを呼んでいたのですが、こちらで画面表示までの時間が短縮できました。全てのケースでそうではないと思いますが、遅い画面では試してみる価値があるかもしれないです。

読んでくださってありがとうございました。

それではまた！