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

取得 GET リクエストでのクエリ文字列の追加

開発者は、取得 API のクエリ文字列機能を調査する際に、jQuery の $ に似たメソッドを使用して GET リクエストにパラメータを渡すことを目指しています。 .ajax().

ソリューション

新しい Fetch API は、URLSearchParams を使用してクエリ文字列の追加に取り組みます。このオブジェクトは、クエリ文字列パラメータを構築および変更するための便利な方法を提供します。

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

URLSearchParams.toString() メソッドは、パラメータ オブジェクトを適切な形式のクエリ文字列にエンコードします。

または、 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 GET リクエストにクエリ文字列パラメータを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。