Einführung in "fetch()"

Matt Gaunt
X Startseite

Mit fetch() können Sie Netzwerkanfragen ähnlich wie XMLHttpRequest (XHR) senden. Die Der Hauptunterschied besteht darin, dass die Fetch API Promise-Objekte verwendet, einfachere API zur Vermeidung komplizierter Rückrufe in der XMLHttpRequest API

Unterstützte Browser

  • Chrome: 42. <ph type="x-smartling-placeholder">
  • Edge: 14. <ph type="x-smartling-placeholder">
  • Firefox: 39. <ph type="x-smartling-placeholder">
  • Safari: 10.1 <ph type="x-smartling-placeholder">

Quelle

Wenn Sie noch nie Promise-Objekte finden Sie unter Einführung in JavaScript-Promise-Objekte.

Grundlegende Abrufanfrage

Hier ein Beispiel, das mit einem XMLHttpRequest implementiert wurde: und dann mit fetch. Wir möchten eine URL anfordern, eine Antwort erhalten und parsen, im JSON-Format.

XMLHttpRequest

Ein XMLHttpRequest benötigt zwei Listener, um den Erfolg zu verarbeiten sowie einen Aufruf von open() und send(). Beispiel aus der MDN-Dokumentation

function reqListener() {
    var data = JSON.parse(this.responseText);
    console.log(data);
}

function reqError(err) {
    console.log('Fetch Error :-S', err);
}

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();

Abrufen

Unsere Abrufanfrage sieht so aus:

fetch('./api/some.json')
  .then(
  function(response) {
    if (response.status !== 200) {
      console.log('Looks like there was a problem. Status Code: ' +
        response.status);
      return;
    }

    // Examine the text in the response
    response.json().then(function(data) {
      console.log(data);
    });
  }
  )
  .catch(function(err) {
    console.log('Fetch Error :-S', err);
  });

Die fetch()-Anfrage benötigt nur einen Aufruf, um dieselbe Arbeit wie die XHR-Anfrage auszuführen. Beispiel. Um die Antwort zu verarbeiten, prüfen wir zuerst, ob der Antwortstatus 200 und parsen Sie dann die Antwort als JSON. Die Antwort auf eine fetch()-Anfrage ist ein Stream-Objekt. Dies bedeutet, dass nach json()-Methode aufrufen, wird ein Promise zurückgegeben. Der Stream erfolgt asynchron.

Antwortmetadaten

Im vorherigen Beispiel wurde der Status Response-Objekt zu. parsen Sie die Antwort im JSON-Format. So gehst du mit anderen Metadaten um, die du benötigst wie Header:

fetch('users.json').then(function(response) {
    console.log(response.headers.get('Content-Type'));
    console.log(response.headers.get('Date'));

    console.log(response.status);
    console.log(response.statusText);
    console.log(response.type);
    console.log(response.url);
});

Antworttypen

Wenn wir eine Abrufanfrage stellen, erhält die Antwort den Statuscode response.type von "basic", „cors“ oder „opaque“. Diese types zeigen, woher die Ressource stammt, und Sie können sie verwenden, um bestimmt, wie das Antwortobjekt behandelt werden soll.

Wenn der Browser eine Ressource vom selben Ursprung anfordert, enthält die Antwort einen basic-Typ mit Einschränkungen dafür, was Sie in der Antwort sehen können.

Wenn eine Anfrage für eine Ressource an einem anderen Ursprung gestellt wird und dieser Ursprung CORs-Header: Der Typ ist cors. cors Antworten ähneln basic-Antworten, schränken jedoch die Überschriften ein, die Sie kann Cache-Control, Content-Language, Content-Type, Expires aufrufen, Last-Modified und Pragma.

opaque-Antworten stammen aus einer anderen Quelle, die keine CORS-Ergebnisse zurückgibt Header. Bei einer opaken Antwort können wir die zurückgegebenen Daten zu lesen oder den Status der Anfrage anzuzeigen, d. h., Sie können die ob die Anfrage erfolgreich war.

Sie können einen Modus für eine Abrufanfrage definieren, sodass nur bestimmte Anfragetypen gelöst werden muss. Sie können folgende Modi festlegen:

  • same-origin ist nur bei Anfragen für Assets mit demselben Ursprung erfolgreich und lehnt alle anderen Anträge ab.
  • cors lässt Anfragen für Assets mit demselben und anderen Ursprüngen zu, die entsprechenden CORs-Header zurückgeben.
  • cors-with-forced-preflight führt einen Preflight-Vorgang aus Häkchen bevor Sie eine Anfrage stellen.
  • no-cors ist für Anfragen an andere Ursprünge vorgesehen, die kein CORS haben und zu einer opaque-Antwort führen, aber wie bereits erwähnt , ist dies im globalen Gültigkeitsbereich des Fensters möglich.

Um den Modus zu definieren, fügen Sie ein Optionsobjekt als zweiten Parameter in die fetch-Anfrage und definieren den Modus in diesem Objekt:

fetch('http://some-site.com/cors-enabled/some.json', {mode: 'cors'})
    .then(function(response) {
    return response.text();
    })
    .then(function(text) {
    console.log('Request successful', text);
    })
    .catch(function(error) {
    log('Request failed', error)
    });

Verkettung von Versprechen

Eines der großen Merkmale von Versprechen ist die Möglichkeit, sie zu verketten. Für Mit fetch() können Sie die Logik für mehrere Abrufanfragen freigeben.

Wenn Sie mit einer JSON API arbeiten, müssen Sie den Status prüfen und den JSON für jede Antwort. Sie können Ihren Code vereinfachen, indem Sie den Status und JSON-Parsing in separaten Funktionen, die Promise-Versprechen zurückgeben, und den Abruf -Anfrage, um nur die endgültigen Daten und den Fehlerfall zu verarbeiten.

function status(response) {
    if (response.status >= 200 && response.status < 300) {
    return Promise.resolve(response)
    } else {
    return Promise.reject(new Error(response.statusText))
    }
}

function json(response) {
    return response.json()
}

fetch('users.json')
    .then(status)
    .then(json)
    .then(function(data) {
    console.log('Request succeeded with JSON response', data);
    }).catch(function(error) {
    console.log('Request failed', error);
    });

In diesem Beispiel wird eine status-Funktion definiert, die response.status und gibt entweder ein aufgelöstes Promise als Promise.resolve(), oder ein abgelehntes Promise Promise.reject() Dies ist die erste Methode, die in der fetch()-Kette aufgerufen wird.

Wenn das Promise aufgelöst wird, ruft das Skript die Methode json() auf, die gibt ein zweites Promise aus dem response.json()-Aufruf zurück und erstellt ein -Objekt, das das geparste JSON enthält. Wenn das Parsing fehlschlägt, abgelehnt und die Catch-Anweisung wird ausgeführt.

Mit dieser Struktur können Sie die Logik für alle Abrufanfragen verwenden, einfacher zu pflegen, zu lesen und zu testen.

POST-Anfrage

Manchmal muss eine Webanwendung eine API mit einer POST-Methode aufrufen und -Parameter im Text der Anfrage. Legen Sie dazu method und body fest. Parameter in den fetch()-Optionen:

fetch(url, {
    method: 'post',
    headers: {
        "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    body: 'foo=bar&lorem=ipsum'
    })
    .then(json)
    .then(function (data) {
    console.log('Request succeeded with JSON response', data);
    })
    .catch(function (error) {
    console.log('Request failed', error);
    });

Anmeldedaten mit einer Abrufanfrage senden

Um eine Abrufanfrage mit Anmeldedaten wie Cookies zu senden, legen Sie die credentials Wert auf "include":

fetch(url, {
    credentials: 'include'
})