fetchとは？｜Agile育成ブログ

fetchは、Web APIの一部として提供されるブラウザおよびNode.js環境で使用されるAPIで、ネットワークリクエストを行うために使用されます。fetchの基本的な仕組みを以下に説明します。

基本構造

fetchは、リソース（通常はHTTPリクエスト）を取得するためのメソッドであり、Promiseを返します。基本的な使用方法は以下の通りです。


fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

ステップごとの説明

リクエストの送信
- fetchメソッドは、指定されたURLにHTTPリクエストを送信します。デフォルトでは、GETリクエストが送信されます。
レスポンスの受信
- fetchメソッドは、サーバーからのレスポンスを取得し、Promiseを返します。このPromiseは、レスポンスが受信されると解決されます。
レスポンスの処理
- Promiseのthenメソッドを使用して、レスポンスオブジェクトを処理します。レスポンスオブジェクトには、HTTPステータスコードやヘッダー情報が含まれています。
データの変換
- レスポンスのボディを取得するために、.json()メソッドや.text()メソッドなどを使用してデータを変換します。例えば、.json()メソッドはレスポンスをJSONオブジェクトに変換します。
エラーハンドリング
- ネットワークエラーやサーバーエラーを処理するために、catchメソッドを使用してエラーハンドリングを行います。

HTTPメソッドの使用

fetchは、GETリクエストだけでなく、他のHTTPメソッド（POST, PUT, DELETEなど）も使用できます。以下はPOSTリクエストの例です。


fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

クロスオリジンリクエスト

fetchはクロスオリジンリクエスト（CORS）をサポートしており、異なるドメインからのリソースを取得できます。CORSポリシーが適切に設定されている必要があります。

キャンセル可能なリクエスト

fetchは、AbortControllerを使用してリクエストをキャンセルすることもできます。


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 => console.error('Error:', error));

// リクエストをキャンセルする
controller.abort();