Adición de cadena de consulta en solicitudes GET de recuperación

Mientras explora las capacidades de cadena de consulta de la API Fetch, un desarrollador pretende pasar parámetros a solicitudes GET utilizando un método similar a $ de jQuery .ajax().

Solución

La nueva API Fetch emplea URLSearchParams para abordar la consulta adición de cadenas. Este objeto ofrece una manera conveniente de crear y modificar parámetros de cadenas de consulta.

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

El método URLSearchParams.toString() codifica el objeto de parámetro en una cadena de consulta con el formato adecuado.

Como alternativa, puede omitir la llamada a .toString(), como JavaScript convierte automáticamente los objetos que no son cadenas en cadenas cuando se concatenan con cadenas. Tenga en cuenta que este enfoque requiere una comprensión más profunda de JavaScript.

Ejemplo completo

Aquí hay un ejemplo completo con 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();