Festlegen der Abfragezeichenfolge mithilfe der Fetch GET-Anforderung

Ich versuche, die neue Fetch-API zu verwenden :

Ich mache eine GETAnfrage wie folgt:

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

Ich bin mir jedoch nicht sicher, wie ich der GETAnfrage eine Abfragezeichenfolge hinzufügen soll . Idealerweise möchte ich in der Lage sein, eine GETAnfrage an ein URLLike zu richten:

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

In jQuerykönnte ich dies tun, indem ich {order_id: 1}als dataParameter von übergebe $.ajax(). Gibt es eine gleichwertige Möglichkeit, dies mit dem Neuen zu tun Fetch API?

Update März 2017:

Die Unterstützung für URL.searchParams ist offiziell in Chrome 51 gelandet, andere Browser benötigen jedoch weiterhin eine Polyfüllung .

Die offizielle Methode zum Arbeiten mit Abfrageparametern besteht darin, sie der URL hinzuzufügen. Aus der Spezifikation ist dies ein Beispiel:

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

Ich bin mir jedoch nicht sicher, ob Chrome die searchParamsEigenschaft einer URL (zum Zeitpunkt des Schreibens) unterstützt. Daher möchten Sie möglicherweise entweder eine Bibliothek eines Drittanbieters oder eine eigene Lösung verwenden .

Update April 2018:

Mit dem URLSearchParams-Konstruktor können Sie ein 2D-Array oder ein Objekt zuweisen und dies einfach dem zuweisen, url.searchanstatt alle Schlüssel zu durchlaufen und sie anzuhängen

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)

Nebenbemerkung: URLSearchParamsist auch in NodeJS verfügbar

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

Wie bereits beantwortet, ist dies per Spezifikation mit der fetch-API noch nicht möglich . Aber ich muss beachten:

Wenn Sie eingeschaltet sind node, gibt es das querystringPaket. Es kann Objekte / Abfrageringe stringifizieren / analysieren:

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

... dann hängen Sie es einfach an die URL an, um es anzufordern.

Das Problem mit dem oben genannten ist jedoch, dass Sie immer ein Fragezeichen ( ?) voranstellen müssen . Eine andere Möglichkeit besteht darin, die parseMethode aus dem Knotenpaket urlwie folgt zu verwenden:

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

Siehe queryunter https://nodejs.org/api/url.html#url_url_format_urlobj

Dies ist möglich, da es intern genau dies tut :

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

Ein prägnanter ES6-Ansatz:

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

Die Funktion toString () von URLSearchParam konvertiert die Abfrageargumente in eine Zeichenfolge, die an die URL angehängt werden kann. In diesem Beispiel wird toString () implizit aufgerufen, wenn es mit der URL verkettet wird.

IE unterstützt diese Funktion nicht, es sind jedoch Polyfills verfügbar.

Sie können #stringifyaus Abfragezeichenfolge verwenden

import { stringify } from 'query-string';

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

Vielleicht ist das besser:

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 - Codiert ein Objekt als Querystring-Parameter

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

Ich weiß, dass dies das absolut Offensichtliche ist, aber ich denke, es lohnt sich, dies als Antwort hinzuzufügen, da es das einfachste von allen ist:

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

Vorlagenliterale sind auch hier eine gültige Option und bieten einige Vorteile.

Sie können rohe Zeichenfolgen, Zahlen, boolesche Werte usw. einschließen:

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

Sie können Variablen einschließen:

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

Sie können Logik und Funktionen einschließen:

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

Was die Strukturierung der Daten einer größeren Abfragezeichenfolge angeht, verwende ich gerne ein Array, das mit einer Zeichenfolge verknüpft ist. Ich finde es leichter zu verstehen als einige der anderen Methoden:

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

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

Ich habe gerade mit fetchModule von Nativescript gearbeitet und mithilfe von String-Manipulationen meine eigene Lösung gefunden. Hängen Sie die Abfragezeichenfolge Stück für Stück an die URL an. Hier ist ein Beispiel, in dem die Abfrage als JSON-Objekt übergeben wird (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.
}

Ich habe dies über mehrere Abfrageparameter getestet und es hat wie ein Zauber funktioniert :) Ich hoffe, das hilft jemandem.

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

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