Fetch API を使用して GET リクエストにクエリ文字列パラメータを追加するにはどうすればよいですか?

Fetch API を使用した GET リクエストでのクエリ文字列の操作

最新の Web 開発では、Fetch API は HTTP リクエストを作成するための強力なメカニズムを提供します。一般的なシナリオの 1 つは、クエリ文字列を含む GET リクエストの送信です。ただし、クエリ文字列パラメーターを追加するセマンティクスは、一般的な jQuery $.ajax() メソッドとは異なります。

質問:

クエリ文字列をクエリ文字列に追加するにはどうすればよいですか? Fetch API を使用して GET リクエストを実行しますか?たとえば、次の URL について考えてみましょう:

http://myapi.com/orders?order_id=1

回答:

Fetch API には、クエリ文字列パラメーターを追加するための 2 つの主要なメソッド、URLSearchParams と URL.

URLSearchParams の使用:

URLSearchParams により、URL クエリ文字列の操作が可能になります。パラメーターを追加、削除、クエリするための直感的なインターフェイスを提供します。クエリ文字列を構築するには、URLSearchParams インスタンスを作成し、必要なパラメータを追加して文字列に変換します。

// Using URLSearchParams
var request = new Request({
  url: 'http://myapi.com/orders',
  method: 'GET'
});
var params = new URLSearchParams();
params.append('order_id', 1);
request.url += '?' + params.toString();

Using URL:

または、 URL クラスを利用すると、URL を直接操作できます。パラメータを追加および取得するためのメソッドが提供されます:

// Using URL
var request = new Request({
  url: new URL('http://myapi.com/orders'),
  method: 'GET'
});
request.url.searchParams.append('order_id', 1);

詳細な例:

次のシナリオを考えてみましょう: RESTful API の特定の投稿からコメントを取得する。 URLSearchParams アプローチを使用した完全な例を次に示します。

// Fetch comments for a specific post using URLSearchParams
async function fetchComments() {
  const postId = 1;
  const url = 'https://jsonplaceholder.typicode.com/comments?' +
    new URLSearchParams({ postId }).toString();
  const response = await fetch(url);
  const comments = await response.json();
  console.log(comments);
}

fetchComments();

これらの手法を活用することで、開発者は Fetch API で作成された GET リクエストにクエリ文字列を効果的に追加でき、追加のパラメータをサーバー側のエンドポイントに渡すことができ、フィルタリングされた結果を取得します。

以上がFetch API を使用して GET リクエストにクエリ文字列パラメータを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。