Fetch GET リクエストを使用したクエリ文字列

Fetch API は、JavaScript で HTTP リクエストを作成するための最新のアプローチを提供します。デフォルトでは、Fetch を使用して作成された GET リクエストにはクエリ文字列パラメータは含まれません。 GET リクエストにクエリ文字列を追加するには、URLSearchParams インターフェイスを使用するか、クエリ文字列を手動で連結できます。

URLSearchParams の使用:

URLSearchParams インターフェイスを使用すると、次のことが可能になります。クエリ文字列を簡単に作成および操作できます。クエリ文字列パラメータを追加するには、set() メソッドを使用できます。

const searchParams = new URLSearchParams();
searchParams.set('order_id', 1);

const request = new Request({
  url: 'http://myapi.com/orders',
  method: 'GET',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: searchParams.toString()
});

fetch(request);

クエリ文字列の連結:

あるいは、クエリ文字列をリクエスト URL に直接連結することもできます:

const request = new Request({
  url: 'http://myapi.com/orders?order_id=1',
  method: 'GET'
});

fetch(request);

注: クエリ文字列を手動で連結することを選択した場合は、無効な文字によってリクエストが中断されるのを防ぐために、クエリ文字列が適切にエンコードされていることを確認してください。