【JavaScript】APIからJSONを取得する簡単な方法【Fetch】

Webアプリを作成しているときに、よく実施する動作確認の1つにAPIからのデータ取得があります。今回はその最も簡単な確認方法を紹介します。

JavaScriptでAPIからデータを取得する方法
JavaScriptでAPIから取得したJSONを表示する方法
さいごに

JavaScriptでAPIからデータを取得する方法

FetchAPIを使用します。

Fetch APIは、fetch関数を提供しておりPromiseオブジェクトを返します。

Promiseオブジェクトは非同期処理のための.thenメソッドを持ち、引数に無名関数を持ちます。
その関数は、サーバ(API)からの応答があった場合に実行されます。

分かりづらい！！下でサンプルを見ましょう！

JavaScriptでAPIから取得したJSONを表示する方法

今回は、ブラウザのコンソールにJSONを表示させます。

APIのURLは各自変更してください。

// APIのURLを指定
const url = 'https://example.com/api/data';

// Fetch APIを使用してデータを取得
fetch(url)
  .then(response => {
    // レスポンスをJSON形式に変換
    return response.json();
  })
  .then(data => {
    // JSONデータをコンソールログに表示
    console.log(data);
  })
  .catch(error => {
    // エラーハンドリング
    console.error('データの取得に失敗しました:', error);
  });

FetchAPIは通信に失敗した場合は、catchが動きます。