Fetch API で JSON データを POST する

JavaScript の Fetch API を利用して、JSON フォーマットのデータをサーバーに POST する方法について説明します。

JSON データの準備

const data = {
  name: "田中 太郎",
  age: 30,
  city: "東京"
};

• オブジェクト形式で JSON データを定義します。

Fetch API の使用

fetch('https://example.com/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
.then(respons   e => {
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
})
.then(data => {
  console.log(data   );
})
.catch(error => {
  console.error('Error:', error);
});

• then メソッドで成功時の処理、catch メソッドでエラー時の処理を定義します。
• body オプションで JSON データを文字列化して送信します。
• headers オプションで Content-Type を application/json に設定します。
• method オプションで HTTP メソッドを POST に設定します。

説明

• response.json() メソッドで JSON レスポンスをパースします。
• response.ok プロパティでレスポンスが成功かどうかをチェックします。
• fetch 関数は Promise を返します。

注意点

• エラーハンドリングを適切に行うことが重要です。
• クロスオリジンリソース共有 (CORS) の設定が必要な場合があります。
• サーバー側の処理が適切に実装されていることを確認してください。

備考

• Async/await を使用することでコードをより読みやすく書くことができます。
• 実際の開発では、エラー処理やレスポンスデータの処理をより詳細に行う必要があります。

コード解説

コード1: JSON データの準備

const data = {
  name: "田中 太郎",
  age: 30,
  city: "東京"
};

• このオブジェクトは、サーバーに送信する JSON データの構造を表します。
• data にはオブジェクトリテラルが代入されており、プロパティとして name, age, city が定義されています。
• const キーワードを使用して、定数 data を宣言します。

コード2: Fetch API を使用した POST リクエスト

fetch('https://example.com/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
.then(respons   e => {
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
})
.then(data => {
  console.log(data   );
})
.catch(error => {
  console.error('Error:', error);
});

• catch メソッドは、リクエストが失敗した場合に実行される関数を指定します。エラーメッセージを出力します。
• then メソッドのチェーンで、パースされた JSON データを出力します。
• then メソッドは、リクエストが成功した場合に実行される関数を指定します。
  • response.ok をチェックして、レスポンスが正常かどうかを確認します。正常でない場合はエラーを投げます。
  • response.json() を呼び出して、レスポンスの JSON データをパースします。
• body: JSON.stringify(data) オプションで、リクエストボディに JSON データを文字列化して設定します。
• headers: { 'Content-Type': 'application/json' } オプションで、リクエストヘッダーに Content-Type を application/json に設定します。これにより、サーバーに JSON データを送信することを示します。

このコードは、JavaScript の fetch API を使用して、JSON データをサーバーに POST する方法を示しています。まず、送信するデータをオブジェクトとして作成し、次に fetch 関数を使用して POST リクエストを送信します。リクエストヘッダーに Content-Type を設定し、リクエストボディに JSON データを指定します。レスポンスが成功すると、JSON データをパースして処理します。エラーが発生した場合には、エラーメッセージを出力します。

Fetch API 以外の JSON データ送信方法

JavaScript では、Fetch API 以外にも JSON データを送信する方法が存在します。ここでは、主要な代替方法として XMLHttpRequest と Axios について説明します。

XMLHttpRequest

• より低レベルな API で、複雑な操作に対応できますが、使用がやや煩雑です。
• 従来から使用されている方法で、Fetch API の登場以前は一般的な選択肢でした。

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://example.com/api/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    c   onsole.error('Request failed.  Returned status of ' + xhr.status);
  }
};
xhr.send(   JSON.stringify(data));

Axios

• インターセプター、エラーハンドリング、自動変換などの便利な機能を提供します。
• Promise ベースの HTTP クライアントライブラリで、Fetch API よりも使いやすく、機能が豊富です。

axios.post('https://example.com/api/data', data, {
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

比較

選択基準

• ブラウザサポートの考慮 (古いブラウザでは XMLHttpRequest が必要になる場合がある)
• 必要となる機能 (インターセプター、エラーハンドリングなど)
• 開発者の経験と好み
• プロジェクトの規模と複雑度