javascript - with - php fetch api




Festlegen der Abfragezeichenfolge mithilfe der Abruf-GET-Anforderung (6)

Ich versuche, die neue Fetch-API zu verwenden: https://developer.mozilla.org/en/docs/Web/API/Fetch_API

Ich mache eine GET-Anfrage wie folgt:

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

Ich bin mir jedoch nicht sicher, wie ich der GET-Anforderung eine Abfragezeichenfolge hinzufügen soll. Idealerweise möchte ich in der Lage sein, eine GET-Anfrage an eine URL wie die folgende zu richten:

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

In jQuery könnte ich dies tun, indem ich {order_id: 1} als Datenparameter von $.ajax() . Gibt es eine äquivalente Möglichkeit, dies mit der neuen Fetch-API zu tun?


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 absolut offensichtlich 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=' + 1,
  method: 'GET'
});
fetch(request);

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

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

Sie können unformatierte 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() }`);

In Bezug auf die Strukturierung der Daten einer größeren Abfragezeichenfolge verwende ich gerne ein Array, das zu einer Zeichenfolge verkettet ist. Ich finde es einfacher 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'
});

Update März 2017:

URL.searchParams Unterstützung von URL.searchParams ist offiziell in Chrome 51 gelandet, für andere Browser ist jedoch noch eine polyfill erforderlich.

Die offizielle Möglichkeit, mit Abfrageparametern zu arbeiten, 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 searchParams Eigenschaft einer URL (zum Zeitpunkt des Schreibens) unterstützt. searchParams möchten Sie möglicherweise 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 das der url.search zuweisen, anstatt alle Schlüssel zu url.search 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)

fetch(url)

Anmerkung: URLSearchParams ist 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//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)
  })




fetch-api