ホームページ > ウェブフロントエンド > jsチュートリアル > Fetch API を使用して GET リクエストにクエリ文字列パラメータを追加するにはどうすればよいですか?

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

Patricia Arquette
リリース: 2024-10-26 06:50:30
オリジナル
269 人が閲覧しました

How to Append Query String Parameters to GET Requests with Fetch API?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート