Добавление строки запроса в запросах Fetch GET

Изучая возможности строки запроса Fetch API, разработчик стремится передавать параметры в запросы GET, используя метод, аналогичный методу $ jQuery. .ajax().

Решение

Новый API Fetch использует 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();