fetchでget

fetch の GET メソッドでは、通常リクエストボディを送信することはできません。しかし、JSONデータを送信したい場合は、クエリパラメータとしてURLに含めるのが一般的です。以下にその具体例を示します。

例: TypeScriptでJSONデータをクエリパラメータとして送る方法

const fetchJsonData = async () => {
  const baseUrl = "https://example.com/api";
  
  // JSONデータをクエリパラメータに変換
  const data = {
    key1: "value1",
    key2: "value2",
  };
  
  const queryString = new URLSearchParams(data).toString();
  const url = `${baseUrl}?${queryString}`;

  try {
    const response = await fetch(url, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
    });

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const result = await response.json();
    console.log(result);
  } catch (error) {
    console.error("Fetch error:", error);
  }
};

fetchJsonData();

解説

データの準備
data オブジェクトに送信したいデータを定義します。
URLSearchParams を使用してクエリ文字列を生成
new URLSearchParams(data).toString() を使って、オブジェクトをクエリパラメータ形式の文字列に変換します。
URLにクエリパラメータを付加
ベースURLにクエリ文字列を付け足して完全なURLを作成します。
fetchを使用してリクエスト
作成したURLを使い、GETリクエストを送信します。

注意点

クエリパラメータはURLに含まれるため、サイズが大きくなるとブラウザやサーバーによって制限を受けることがあります。大きなデータを送信する場合は、POSTメソッドを使用することを検討してください。
サーバー側でクエリパラメータを正しく処理する必要があります。

必要であれば、このコードのカスタマイズ方法も説明できます！

yukikim/sample.md

例: TypeScriptでJSONデータをクエリパラメータとして送る方法

解説

注意点