javascript - node - Configuración de la cadena de consulta utilizando la solicitud GET Fetch

json fetch javascript

Question

Estoy tratando de usar la nueva API Fetch: https://developer.mozilla.org/en/docs/Web/API/Fetch_API

Estoy haciendo una solicitud GET 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 solicitud GET. Idealmente, quiero poder hacer una solicitud GET a una URL como:

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

En jQuery podría hacer esto pasando {order_id: 1} como el parámetro de data de $.ajax() . ¿Hay una forma equivalente de hacerlo con la nueva API Fetch?

Answer 1

encodeQueryString - codifica un objeto como parámetros de cadena de consulta

/**
 * Encode an object as url query string parameters
 * - includes the leading "?" prefix
 * - example input — {key: "value", alpha: "beta"}
 * - example output — output "?key=value&alpha=beta"
 * - returns empty string when given an empty object
 */
function encodeQueryString(params) {
    const keys = Object.keys(params)
    return keys.length
        ? "?" + keys
            .map(key => encodeURIComponent(key)
                + "=" + encodeURIComponent(params[key]))
            .join("&")
        : ""
}

encodeQueryString({key: "value", alpha: "beta"})
 //> "?key=value&alpha=beta"

Answer 2

Como ya se respondió, esto no es posible por especificación con el fetch -API, todavía. Pero tengo que tener en cuenta:

Si está en el node , está el paquete de querystring . Puede stringificar / analizar objetos / cadenas de consulta:

var querystring = require(''querystring'')
var data = { key: ''value'' }
querystring.stringify(data) // => ''key=value''

... luego añádelo a la url para solicitarlo.

Sin embargo, el problema con lo anterior es que siempre tiene que anteponer un signo de interrogación ( ? ). Entonces, otra forma es usar el método de parse del paquete de url nodos y hacerlo de la siguiente manera:

var url = require(''url'')
var data = { key: ''value'' }
url.format({ query: data }) // => ''?key=value''

Ver query en https://nodejs.org/api/url.html#url_url_format_urlobj

Esto es posible, ya que internamente solo this :

search = obj.search || (
    obj.query && (''?'' + (
        typeof(obj.query) === ''object'' ?
        querystring.stringify(obj.query) :
        String(obj.query)
    ))
) || ''''

Answer 3

Los literales de plantilla también son una opción válida aquí y brindan algunos beneficios.

Puede incluir cadenas sin formato, números, valores booleanos, etc.

    let request = new Request(`https://example.com/?name=${''Patrick''}&number=${1}`);

Puedes incluir variables:

    let request = new Request(`https://example.com/?name=${nameParam}`);

Puede incluir lógica y funciones:

    let request = new Request(`https://example.com/?name=${nameParam !== undefined ? nameParam : getDefaultName() }`);

En cuanto a estructurar los datos de una cadena de consulta más grande, me gusta usar una matriz concatenada en una cadena. Me resulta más fácil de entender que algunos de los otros métodos:

let queryString = [
  `param1=${getParam(1)}`,
  `param2=${getParam(2)}`,
  `param3=${getParam(3)}`,
].join(''&'');

let request = new Request(`https://example.com/?${queryString}`, {
  method: ''GET''
});

Answer 4

Puede usar #stringify de la cadena de consulta

import { stringify } from ''query-string'';

fetch(`https://example.org?${stringify(params)}`)

Answer 5

Quizás esto es mejor:

const withQuery = require(''with-query'');

fetch(withQuery(''https://api.github.com/search/repositories'', {
  q: ''query'',
  sort: ''stars'',
  order: ''asc'',
}))
.then(res => res.json())
.then((json) => {
  console.info(json);
})
.catch((err) => {
  console.error(err);
});

Answer 6

Sé que esto indica lo absolutamente obvio, pero creo que vale la pena agregar esto como respuesta, ya que es el más simple de todos:

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

Answer 7

Actualización de marzo de 2017:

URL.searchParams compatibilidad con URL.searchParams ha aterrizado oficialmente en 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. De la especificación , 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 sea compatible con la propiedad searchParams de una URL (en el momento de la escritura), por lo que es posible que desee utilizar una biblioteca de terceros o una solución roll-your-own .

Actualización de abril de 2018:

Con el uso del constructor URLSearchParams , puede asignar una matriz 2D o un objeto y simplemente asignarlo a url.search lugar de url.search todas las teclas 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)

fetch(url)

URLSearchParams : URLSearchParams también está disponible en NodeJS

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

Answer 8

let params = {
  "param1": "value1",
  "param2": "value2"
}

let query = Object.keys(params)
             .map(k => encodeURIComponent(k) + ''='' + encodeURIComponent(params[k]))
             .join(''&'');

let url = ''https:example.com//xyz.com/search?'' + query

fetch(url)
  .then(data => data.text())
  .then((text) => {
    console.log(''request succeeded with JSON response'', text)
  }).catch(function (error) {
    console.log(''request failed'', error)
  })