Configuración de una cadena de consulta mediante la solicitud Fetch GET

Estoy intentando utilizar la nueva API Fetch :

Estoy haciendo una GETsolicitud como esta:

var request = new Request({
  url: 'http://myapi.com/orders',
  method: 'GET'
});
fetch(request);

Sin embargo, no estoy seguro de cómo agregar una cadena de consulta a la GETsolicitud. Idealmente, quiero poder hacer una GETsolicitud a un URLMe gusta:

'http://myapi.com/orders?order_id=1'

Podría jQueryhacer esto pasando {order_id: 1}como dataparámetro de $.ajax(). ¿Existe una forma equivalente de hacer eso con el nuevo Fetch API?

Jan 27 '16 20:01 mylescc

Un enfoque conciso y moderno:

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

Cómo funciona: cuando se concatena una cadena (por ejemplo, la URL) con una instancia de URLSearchParams , se llamará automáticamente a su método toString() para convertir la instancia en una representación de cadena, que resulta ser una cadena de consulta codificada correctamente. Si la invocación automática de toString()es demasiado mágica para tu gusto, quizás prefieras llamarlo explícitamente así:fetch('https://...' + new URLSearchParams(...).toString())

Un ejemplo completo de una solicitud de recuperación con parámetros de consulta:

Mostrar fragmento de código

// Real example you can copy-paste and play with.
// jsonplaceholder.typicode.com provides a dummy rest-api
// for this sort of purpose.
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();

Expand snippet

Si estás usando/apoyando...

Es decir: Internet Explorer no proporciona soporte nativo para URLSearchParams o buscar, pero hay polyfills disponibles .
Nodo: A partir del Nodo 18 hay soporte nativo para la API de recuperación (en la versión 17.5 estaba detrás de la --experimental-fetchbandera). En versiones anteriores, puede agregar la API de recuperación a través de un paquete como node-fetch . URLSearchParams viene con Node y se puede encontrar como un objeto global desde la versión 10. En versiones anteriores, puede encontrarlo en require('url').URLSearchParams.
TypeScript: los valores proporcionados URLSearchParamsse convertirán automáticamente en una cadena, por lo que la definición de TypeScript URLSearchParamsrequiere que proporcione todos los valores como cadenas. Aquellos que no usan TypeScript pueden sentirse cómodos proporcionando otros tipos de valores a esta función si sienten que el comportamiento de coerción es intuitivo. Por ejemplo, los números se comportarán exactamente como cabría esperar, mientras que la forma en que las matrices se coaccionan implícitamente puede causar confusión a futuros lectores.
Node + TypeScript: si usa Node y TypeScript juntos, encontrará que, debido a algunas limitaciones técnicas, TypeScript no ofrece definiciones de tipos para URLSearchParams globales. La solución más sencilla es importarlo desde el urlmódulo. Consulte este número para obtener más información.

Oct 17 '2019 17:10 Scotty Jamison

Actualización de marzo de 2017:

La compatibilidad con URL.searchParams llegó oficialmente a Chrome 51, pero otros navegadores aún requieren un polyfill .

La forma oficial de trabajar con parámetros de consulta es simplemente agregarlos a la URL. Según las especificaciones , este es un ejemplo:

var url = new URL("https://geo.example.org/api"),
    params = {lat:35.696233, long:139.570431}
Object.keys(params).forEach(key => url.searchParams.append(key, params[key]))
fetch(url).then(/* … */)

Sin embargo, no estoy seguro de que Chrome admita la searchParamspropiedad de una URL (en el momento de escribir este artículo), por lo que es posible que desee utilizar una biblioteca de terceros o una solución propia .

Actualización de abril de 2018:

Con el uso del constructor URLSearchParams , puede asignar una matriz 2D o un objeto y simplemente asignarlo en url.searchlugar de recorrer todas las claves y agregarlas.

var url = new URL('https://sl.se')

var params = {lat:35.696233, long:139.570431} // or:
var params = [['lat', '35.696233'], ['long', '139.570431']]

url.search = new URLSearchParams(params).toString();

fetch(url)

Nota al margen: URLSearchParamstambién está disponible en NodeJS

const { URL, URLSearchParams } = require('url');

Jan 27 '2016 13:01 CodingIntrigue