Adição de string de consulta em solicitações GET de busca

Ao explorar os recursos de string de consulta da API Fetch, um desenvolvedor pretende passar parâmetros para solicitações GET usando um método semelhante ao $ do jQuery .ajax().

Solução

A nova API Fetch emprega URLSearchParams para lidar com a adição de strings de consulta. Este objeto oferece uma maneira conveniente de criar e modificar parâmetros de string de consulta.

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

O método URLSearchParams.toString() codifica o objeto de parâmetro em uma string de consulta formatada apropriadamente.

Como alternativa, você pode omitir a chamada .toString(), como O JavaScript força automaticamente objetos que não são de string a strings quando concatenados com strings. Observe que essa abordagem requer uma compreensão mais profunda de JavaScript.

Exemplo completo

Aqui está um exemplo abrangente com parâmetros de consulta:

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();