web-dev-qa-db-fra.com

Définition de la chaîne de requête à l'aide de la requête Fetch GET

J'essaie d'utiliser la nouvelle API Fetch: https://developer.mozilla.org/en/docs/Web/API/Fetch_API

Je fais une demande GET comme ceci:

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

Cependant, je ne sais pas comment ajouter une chaîne de requête à la demande GET. Idéalement, je souhaite pouvoir envoyer une demande GET à une URL telle que:

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

En jQuery, je pourrais le faire en passant {order_id: 1} comme paramètre data de $.ajax(). Existe-t-il un moyen équivalent de le faire avec la nouvelle API Fetch?

javascriptfetch-api
89
mylescc

Mise à jour de mars 2017:

RL.searchParams le support a officiellement atterri dans Chrome 51, mais les autres navigateurs nécessitent toujours un polyfill .

La manière officielle de travailler avec des paramètres de requête consiste simplement à les ajouter à l'URL. De la spécification , voici un exemple:

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(/* … */)

Cependant, je ne suis pas sûr que Chrome prenne en charge la propriété searchParams d'une URL (au moment de l'écriture), vous voudrez donc peut-être utiliser une bibliothèque tierce ou solution personnalisée .

Mise à jour avril 2018:

Avec l'utilisation de constructeur URLSearchParams , vous pouvez affecter un tableau 2D ou un objet et simplement l'attribuer au url.search au lieu de passer en boucle sur toutes les clés et de les ajouter.

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)

Note: URLSearchParams est également disponible dans NodeJS

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

Comme déjà répondu, ceci n'est pas encore possible par spécification avec l'API fetch-. Mais je dois noter:

Si vous êtes sur node, il y a le paquetage querystring. Il peut stringifier/analyser des objets/chaînes de requête:

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

... puis ajoutez-le simplement à l'URL à demander.

Cependant, le problème avec ce qui précède est que vous devez toujours ajouter un point d'interrogation (?). Donc, une autre façon consiste à utiliser la méthode parse à partir du paquet node url et procédez comme suit:

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

Voir query à l'adresse https://nodejs.org/api/url.html#url_url_format_urlobj

C'est possible, comme cela se fait en interne juste this :

search = obj.search || (
    obj.query && ('?' + (
        typeof(obj.query) === 'object' ?
        querystring.stringify(obj.query) :
        String(obj.query)
    ))
) || ''
21
yckart
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)
  })
17
Sudharshan

encodeQueryString - encode un objet en tant que paramètres de chaîne de requête

/**
 * 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"
4
ChaseMoskal

Vous pouvez utiliser #stringify de chaîne de requête

import { stringify } from 'query-string';

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

Peut-être que c'est mieux:

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);
});
2
Bin HOU

Je sais que cela énonce une évidence absolue, mais j'estime qu'il vaut la peine d'ajouter ceci à titre de réponse car c'est le plus simple de tous:

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

Les littéraux de modèles sont également une option valide ici et offrent quelques avantages.

Vous pouvez inclure des chaînes brutes, des nombres, des valeurs booléennes, etc.:

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

Vous pouvez inclure des variables:

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

Vous pouvez inclure la logique et les fonctions:

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

En ce qui concerne la structuration des données d'une chaîne de requête plus grande, j'aime bien utiliser un tableau concaténé à une chaîne. Je trouve cela plus facile à comprendre que certaines des autres méthodes:

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

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