フェッチ GET リクエストでのクエリ文字列の追加

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

Solution

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

fetch('https://example.com?'   new URLSearchParams({
    foo: 'value',
    bar: 2,
}).toString())

URLSearchParams.toString() メソッドは、パラメーター オブジェクトを適切にフォーマットされたクエリ文字列にエンコードします。

または、次のように .toString() 呼び出しを省略することもできます。 JavaScript は、文字列と連結されるときに、文字列以外のオブジェクトを自動的に文字列に強制します。このアプローチには、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();