JavaScriptでAPIを呼び出すfetch関数の使い方

API連携はfetchで決まり！JavaScriptのfetch関数を徹底解説します。

JavaScriptのfetch関数とは？基本を理解しよう

JavaScriptのfetch関数は、Web APIからデータを取得するための強力なツールです。従来のXMLHttpRequestに代わる、よりシンプルでモダンなインターフェースを提供します。Promiseベースであるため、非同期処理を扱いやすく、コードの可読性を向上させることができます。

この記事では、fetch関数の基本的な使い方から、エラーハンドリング、リクエストオプションの設定まで、API連携に必要な知識を網羅的に解説します。APIを効果的に活用し、Webアプリケーションをよりインタラクティブにしましょう。

fetch関数の基本的な使い方：GETリクエスト

fetch関数を使った最もシンプルなGETリクエストの例を見てみましょう。

fetch('https://example.com/api/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('エラー:', error);
  });

このコードでは、example.com/api/dataというURLに対してGETリクエストを送信しています。thenメソッドを使って、レスポンスをJSON形式に変換し、コンソールに出力します。catchメソッドは、エラーが発生した場合にエラー内容をコンソールに出力します。

重要なのは、fetch関数はPromiseを返すということです。これにより、非同期処理を順番に実行できます。response.json()もまたPromiseを返すため、さらに.thenで処理を繋げることができます。

POSTリクエスト：データを送信する

fetch関数を使ってデータをAPIに送信するには、methodオプションをPOSTに設定し、bodyオプションに送信するデータを指定します。

const data = {
  name: 'John Doe',
  age: 30
};

fetch('https://example.com/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
  console.log('成功:', data);
})
.catch(error => {
  console.error('エラー:', error);
});

この例では、dataオブジェクトをJSON文字列に変換し、リクエストのbodyとして送信しています。headersオプションでContent-Typeをapplication/jsonに設定することで、サーバーにJSON形式でデータが送信されることを伝えます。

JSON.stringify()を使ってJavaScriptオブジェクトをJSON形式の文字列に変換することを忘れないでください。

エラーハンドリング：try…catchとresponse.ok

fetch関数でのエラーハンドリングは重要です。ネットワークエラーやサーバーエラーが発生した場合に、適切に対応することで、アプリケーションの安定性を高めることができます。

基本的なエラーハンドリングは、try...catchブロックを使用することです。また、response.okプロパティを使って、HTTPステータスコードが成功範囲（200-299）にあるかどうかを確認することも重要です。

async function fetchData() {
  try {
    const response = await fetch('https://example.com/api/data');

    if (!response.ok) {
      throw new Error(HTTPエラー: ${response.status});
    }

    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('エラー:', error);
  }
}

fetchData();

この例では、response.okがfalseの場合に、エラーをthrowしています。これにより、HTTPステータスコードがエラーを示す場合に、catchブロックでエラーを処理することができます。

リクエストオプション：ヘッダー、キャッシュ、モード

fetch関数には、リクエストの挙動を細かく制御するための様々なオプションが用意されています。headers、cache、modeなどが代表的なオプションです。

headersオプションを使用すると、リクエストヘッダーを設定できます。認証トークンやContent-Typeなどを指定する場合に使用します。

cacheオプションは、キャッシュの挙動を制御します。default、no-store、reloadなどの値が指定できます。

modeオプションは、リクエストのモードを指定します。cors、no-cors、same-originなどの値が指定できます。

fetch('https://example.com/api/data', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
  },
  cache: 'no-store',
  mode: 'cors'
})
.then(response => response.json())
.then(data => {
  console.log(data);
})
.catch(error => {
  console.error('エラー:', error);
});

この例では、AuthorizationヘッダーにAPIキーを設定し、キャッシュを無効化し、CORSモードでリクエストを送信しています。

参考リンク

まとめ

fetch関数は、JavaScriptでAPIを呼び出すための非常に強力なツールです。基本的なGETリクエストから、POSTリクエスト、エラーハンドリング、リクエストオプションの設定まで、様々な機能を備えています。fetch関数をマスターすることで、Webアプリケーションをより柔軟かつインタラクティブにすることができます。

ぜひ、fetch関数を使いこなして、API連携をスムーズに進めてください。