高度なFetch APIの使い方

Fetch APIは、JavaScriptでデータを非同期的に取得するための強力で柔軟なツールです。HTTPリクエストを送信して、サーバーから情報を受け取る処理を簡潔に実行できるため、Webアプリケーションの開発で広く利用されています。この記事では、Fetch APIの基本的な使い方から、少し高度な利用方法までを包括的に解説します。

1. Fetch APIの基本的な使い方

Fetchは、HTTPリクエストを非同期に行い、レスポンスを処理するためのメソッドです。以下は、fetch()を使ってリソースを取得する基本的なコード例です。

javascript
CopyEdit
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('ネットワークの問題が発生しました');
    }
    return response.json();  // JSONとしてパース
  })
  .then(data => console.log(data))
  .catch(error => console.error('エラー:', error));

このコードでは、fetch()が指定されたURLにHTTPリクエストを送信し、そのレスポンスを処理します。レスポンスが正常であれば、json()メソッドを使ってJSONデータとしてパースし、次にそれを使って何か処理を行います。エラーが発生した場合、catch()メソッドが呼ばれ、エラーメッセージを表示します。

2. HTTPメソッドを使ったリクエストの送信

Fetch APIは、デフォルトではGETメソッドを使用しますが、POSTやPUTなど他のHTTPメソッドを使うこともできます。以下に、POSTメソッドを使用してデータをサーバーに送信する例を示します。

javascript
CopyEdit
fetch('https://api.example.com/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    username: 'sampleUser',
    password: 'samplePassword',
  }),
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('エラー:', error));

このコードでは、POSTメソッドを使用して、サーバーにJSONデータを送信しています。リクエストのヘッダーにはContent-Type: application/jsonを指定し、送信するデータをJSON.stringify()で文字列に変換してbodyにセットしています。

3. 複数のリクエストを並行処理する

複数のfetch()リクエストを並行して処理する場合、Promise.all()を使うことができます。これにより、すべてのリクエストが完了するのを待ってから結果を処理できます。

javascript
CopyEdit
Promise.all([
  fetch('https://api.example.com/data1'),
  fetch('https://api.example.com/data2'),
])
  .then(responses => Promise.all(responses.map(response => response.json())))
  .then(data => {
    console.log(data[0]);  // data1の結果
    console.log(data[1]);  // data2の結果
  })
  .catch(error => console.error('エラー:', error));

この例では、fetch()を2回呼び出し、Promise.all()を使って両方のリクエストが完了するのを待っています。結果は配列として返され、各レスポンスをjson()でパースして処理しています。

4. リクエストのタイムアウトを設定する

fetch()は、デフォルトでタイムアウトを設定していませんが、タイムアウトを設定したい場合は、AbortControllerを使ってリクエストをキャンセルすることができます。

javascript
CopyEdit
const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('リクエストがタイムアウトしました');
    } else {
      console.error('エラー:', error);
    }
  });

// 5秒後にリクエストをキャンセル
setTimeout(() => controller.abort(), 5000);

このコードでは、AbortControllerを作成して、signalをfetch()のオプションとして渡しています。その後、setTimeout()を使って5秒後にリクエストをキャンセルしています。キャンセルされた場合は、AbortErrorが発生し、タイムアウトのメッセージが表示されます。

5. リクエストのヘッダーをカスタマイズする

fetch()では、リクエストヘッダーを簡単にカスタマイズできます。特定のAPIに認証トークンを送信したい場合などに便利です。

javascript
CopyEdit
fetch('https://api.example.com/secure-data', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer yourTokenHere',
  },
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('エラー:', error));

この例では、リクエストのAuthorizationヘッダーに認証トークンを追加しています。APIがトークンを要求する場合、このようにカスタムヘッダーを使って認証情報を送信できます。

6. fetch()のレスポンスのステータスコードを確認する

fetch()は、レスポンスが成功したかどうかを示すresponse.okプロパティを提供します。しかし、ステータスコードを手動で確認したい場合もあります。

javascript
CopyEdit
fetch('https://api.example.com/data')
  .then(response => {
    if (response.status === 404) {
      console.log('リソースが見つかりません');
    } else if (response.status === 500) {
      console.log('サーバーエラー');
    } else if (response.ok) {
      return response.json();
    }
  })
  .then(data => console.log(data))
  .catch(error => console.error('エラー:', error));

ここでは、response.statusを使ってHTTPステータスコードを確認し、エラーハンドリングを行っています。

7. fetch()とCookieの取り扱い

fetch()は、デフォルトではクッキーを送信しませんが、credentialsオプションを使うことで、クッキーを送信することができます。これは、認証が必要なAPIで役立ちます。

javascript
CopyEdit
fetch('https://api.example.com/secure-data', {
  method: 'GET',
  credentials: 'include',  // クッキーを送信
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('エラー:', error));

credentials: 'include'は、クロスサイトリクエストでもクッキーを送信するオプションです。これにより、認証済みのリクエストを行うことができます。

結論

fetch()は、非常に強力で柔軟なAPIであり、非同期でデータを取得するだけでなく、複雑なリクエストを扱うことができます。高度な使用方法として、リクエストメソッドの変更、並行リクエストの処理、タイムアウトの設定、ヘッダーのカスタマイズなどがあります。これらの技術を活用することで、より効率的で使いやすいWebアプリケーションを開発することができます。