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

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

Fetch API を使用してカスタム クエリ パラメータを含む GET リクエストを作成しようとすると、次のような適切な疑問が生じます。私のリクエストに対するクエリ文字列は?」 「http://myapi.com/orders?order_id=1」のような GET リクエストを調整する必要性が不可欠であることから、クエリは残ります。Fetch 内に jQuery の {order_id: 1} データ パラメータに相当するものはありますか?

現代的で簡潔な解決策

URLSearchParams の可能性を解き放つ、現代的なソリューションが登場します。 toString() メソッドを使用すると、インスタンスをエンコードされたクエリ文字列に簡単に変換し、それをリクエスト URL にシームレスに追加できます。

<code class="javascript">fetch('https://example.com?' + new URLSearchParams({
  foo: 'value',
  bar: 2,
}).toString())</code>

URLSearchParams は、オブジェクトを目的のクエリ文字列形式に細心の注意を払って変換し、手動エンコードが必要です。あるいは、文字列連結時の JavaScript の自動変換を利用して、toString() 呼び出しを省略することもできます。ただし、このアプローチでは、JavaScript の内部動作をより深く理解する必要があります。

包括的なフェッチの例

完全な図として、カスタマイズされたクエリ パラメーターを使用してフェッチ リクエストを実行する次の例を考えてみましょう。

<code class="javascript">async function doAsyncTask() {
  const url = (
    'https://jsonplaceholder.typicode.com/comments?' +
    new URLSearchParams({ postId: 1 }).toString()
  );

  const result = await fetch(url)
    .then(response => response.json());

  console.log('Fetched from: ' + url);
  console.log(result);
}

doAsyncTask();</code>

クエリ文字列パラメータの解放

これらのテクニックを自由に使用すると、Fetch API を使用して GET リクエストにクエリ文字列を簡単に追加できるようになり、データ取得を形作ることができるようになります。正確かつ効率的なオペレーション。

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