Impostazione della stringa di query mediante la richiesta GET Fetch

Sto cercando di utilizzare la nuova API Fetch :

Sto facendo una GETrichiesta come questa:

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

Tuttavia, non sono sicuro di come aggiungere una stringa di query alla GETrichiesta. Idealmente, voglio essere in grado di fare una GETrichiesta a un URLsimile:

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

In jQuerypotrei farlo passando {order_id: 1}il dataparametro di $.ajax(). Esiste un modo equivalente per farlo con il nuovo Fetch API?

Aggiornamento marzo 2017:

Il supporto URL.searchParams è arrivato ufficialmente in Chrome 51, ma altri browser richiedono ancora un polyfill .

Il modo ufficiale di lavorare con i parametri della query è semplicemente aggiungerli all'URL. Dalle specifiche , questo è un esempio:

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

Tuttavia, non sono sicuro che Chrome supporti la searchParamsproprietà di un URL (al momento della stesura), quindi potresti voler utilizzare una libreria di terze parti o una soluzione roll-your-own .

Aggiornamento aprile 2018:

Con l'uso della funzione di costruzione URLSearchParams è possibile assegnare un array 2D o un oggetto e assegnarlo a url.searchinvece di scorrere su tutte le chiavi e aggiungerle

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)

Sidenote: URLSearchParamsè disponibile anche in NodeJS

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

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

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

let url = 'https://example.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)
  });

Come già risposto, questo non è ancora possibile per le specifiche con fetch-API. Ma devo notare:

Se sei acceso node, c'è il querystringpacchetto. Può stringere / analizzare oggetti / stringhe di query:

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

... quindi basta aggiungerlo all'URL per richiedere.

Tuttavia, il problema con quanto sopra è che devi sempre anteporre un punto interrogativo ( ?). Quindi, un altro modo è usare il parsemetodo dal urlpacchetto nodes e farlo come segue:

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

Vedere querya https://nodejs.org/api/url.html#url_url_format_urlobj

Questo è possibile, come fa internamente solo questo :

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

Un approccio sintetico ES6:

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

La funzione toString () di URLSearchParam convertirà gli argomenti della query in una stringa che può essere aggiunta all'URL. In questo esempio, toString () viene chiamato implicitamente quando viene concatenato con l'URL.

IE non supporta questa funzionalità, ma sono disponibili polyfill .

È possibile utilizzare #stringifydalla stringa di query

import { stringify } from 'query-string';

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

Forse è meglio:

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

encodeQueryString: codifica un oggetto come parametri querystring

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

So che questo sta affermando l'assoluto ovvio, ma penso che valga la pena aggiungerlo come risposta in quanto è il più semplice di tutti:

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

Anche i letterali modello sono un'opzione valida qui e offrono alcuni vantaggi.

Puoi includere stringhe, numeri, valori booleani grezzi, ecc.:

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

Puoi includere variabili:

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

Puoi includere logica e funzioni:

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

Per quanto riguarda la strutturazione dei dati di una stringa di query più grande, mi piace usare un array concatenato a una stringa. Trovo più facile da capire rispetto ad alcuni degli altri metodi:

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

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

Stavo solo lavorando con il modulo fetch di Nativescript e ho scoperto la mia soluzione usando la manipolazione delle stringhe. Aggiunge la stringa di query bit per bit all'URL. Ecco un esempio in cui la query viene passata come oggetto json (query = {order_id: 1}):

function performGetHttpRequest(fetchLink='http://myapi.com/orders', query=null) {
    if(query) {
        fetchLink += '?';
        let count = 0;
        const queryLength = Object.keys(query).length;
        for(let key in query) {
            fetchLink += key+'='+query[key];
            fetchLink += (count < queryLength) ? '&' : '';
            count++;
        }
    }
    // link becomes: 'http://myapi.com/orders?order_id=1'
    // Then, use fetch as in MDN and simply pass this fetchLink as the url.
}

Ho provato questo su un numero multiplo di parametri di query e ha funzionato come un fascino :) Spero che questo aiuti qualcuno.

var paramsdate = 01 + '% s' + 12 + '% s' + 2012 + '% s';

request.get (" https://www.exampleurl.com?fromDate= " + paramsDate;