Einführung in das Holen

Ursprünglicher Autor: Matt Gaunt
  • Übersetzung

Auf Wiedersehen XMLHttpRequest!


fetch()Ermöglicht das Erstellen von Abfragen, die XMLHttpRequest (XHR) ähneln. Der Hauptunterschied besteht darin, dass die Fetch-API Promises verwendet , mit denen Sie eine einfachere und sauberere API verwenden, die katastrophale Anzahl von Rückrufen vermeiden und sich die API für XMLHttpRequest merken müssen.


Die Abruf-API wurde für Benutzer zusammen mit Service-Mitarbeitern im globalen Bereich in Chrome 40 verfügbar, ist jedoch bereits in Version 42 im Fensterbereich verfügbar. Natürlich gibt es für alle anderen Browser, die Fetch noch nicht unterstützen, ein Polyfile von GitHub , das ab sofort verfügbar ist.

Einfache Abrufanforderung


Beginnen wir mit einem Vergleich eines einfachen Beispiels, das mit XMLHttpRequestund implementiert wurde fetch. In diesem Beispiel wird lediglich eine Anfrage an die URL gesendet, die Antwort abgerufen und als JSON analysiert.

XMLHttpRequest


Für das XMLHttpRequest-Beispiel müssen zwei Ereignishandler auf successund installiert errorund zwei Methoden aufgerufen werden: open()und send(). Ein 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();

Holen


Unsere Abrufanforderung sieht folgendermaßen 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);  
  });


Zunächst überprüfen wir den Status der Antwort und ob die Anfrage erfolgreich abgeschlossen wurde (wir erwarten 200 Status). Wenn alles in Ordnung ist, analysieren Sie die Antwort als JSON.

Die Antwort fetch()ist ein Stream-Objekt . Dies bedeutet, dass json()wir durch den Methodenaufruf Promise erhalten, weil Das Lesen von einem solchen Objekt ist asynchron.

Antwort-Metadaten


Im vorherigen Beispiel haben wir untersucht, wie Sie den Status eines Antwortobjekts überprüfen und die Antwort selbst in JSON konditionieren können. Die restlichen Metadaten, auf die Sie zugreifen können (z. B. Header), sind nachfolgend aufgeführt:

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 Abrufanforderung stellen, erhält die Antwort den Typ "basic", "cors" oder "opaque". Diese „Typen“ geben an, von welcher Ressource die Daten stammen, und können zur Bestimmung des Datenverarbeitungsprozesses verwendet werden.

Wenn eine Anforderung an eine Ressource gesendet wird, die sich am selben Ursprung befindet ( was bedeutet, dass die Anforderung an demselben Standort ausgeführt wird. Ungefähr per. ), Enthält die Antwort den Typ "basic", und es gibt keine Einschränkungen für eine solche Anforderung.

Wenn die Anforderung von einem Ursprung zu einem anderen erfolgt (domänenübergreifende Anforderung), die wiederum CORS zurückgibtÜberschriften, dann wird der Typ cors sein. Objekte mit den Typen "cors" und "basic" sind fast identisch, "cors" schränkt jedoch die Metadaten ein, auf die zugegriffen werden kann: "Cache-Control", "Content-Language", "Content-Type", "Expires", "Last-Modified" und "Pragma".

Was „undurchsichtig“ betrifft, kommt es in Fällen vor, in denen eine CORS-Anforderung ausgeführt wird, die Remote-Ressource jedoch keine CORS-Header zurückgibt. Diese Art von Anforderung bietet keinen Zugriff auf den Daten- oder Statusheader, sodass wir das Ergebnis der Anforderung nicht beurteilen können. Im Rahmen der aktuellen Implementierung ist fetch()es nicht möglich, CORS-Anforderungen aus dem Fensterbereich auszuführen, und hier steht, warum. Diese Funktionalität sollte hinzugefügt werden, sobald die Cache-API verfügbar istwird aus dem Fensterobjekt zugreifbar sein.

Sie können den erwarteten Abfragemodus bestimmen und so die Ergebnisse von Abfragen mit dem falschen Typ filtern. Der Anforderungsmodus kann auf Folgendes eingestellt werden:

- "Gleiche Herkunft" wird nur für Anforderungen mit gleicher Herkunft erfolgreich ausgeführt, alle anderen Anforderungen werden abgelehnt.
- "cors" funktioniert genauso wie "same origin" + bietet die Möglichkeit, Anforderungen an Websites von Drittanbietern zu erstellen, wenn diese die entsprechenden CORS-Header zurückgeben.
- "cors-with-forced-preflight" funktioniert genauso wie "cors", sendet jedoch immer eine Testanforderung zur Überprüfung vor der Anforderung .
- "no-cors" wird verwendet, wenn eine Anforderung zum Ursprung ausgeführt werden muss, bei der keine CORS-Header gesendet werden und das Ergebnis der Ausführung ein Objekt vom Typ "opak" ist. Wie oben erwähnt, ist dies derzeit im Fensterfenster nicht möglich.

Um den Anforderungsmodus zu bestimmen, fügen Sie der Anforderung das Optionsobjekt als zweiten Parameter hinzu und setzen Sie in diesem Objekt den Modus:

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

Verspricht Ketten


Eine der großartigen Eigenschaften von Promises ist die Fähigkeit, sie in Ketten zu gruppieren. Wenn wir in Bereichen über sie sprechen fetch(), können wir die Logik zwischen den Anforderungen „fummeln“.

Wenn Sie mit der JSON-API arbeiten, müssen Sie den Status überprüfen und JSON für jede Antwort analysieren. Sie können Ihren Code vereinfachen, indem Sie Statusanalyse und JSON als separate Funktionen definieren, die Promises zurückgeben. Sie müssen nur über die Verarbeitung der Daten selbst und natürlich über Ausnahmen nachdenken.

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

Wir definieren eine Funktion, response.statusdie das Ergebnis prüft und zurückgibt: Promise.resolve()oder Promise.reject(). Dies ist die erste Methode in unserer Kette, die aufgerufen wird. Wenn sie erfolgreich ist ( Promise.resolve()), wird die nächste Methode aufgerufen fetch(), die wiederum Promise from zurückgibt response.json(). Nach diesem Aufruf haben wir bei Erfolg ein fertiges JSON-Objekt. Wenn das Parsen fehlschlägt, wird Promise abgebrochen und die Ausnahmebedingung ausgelöst.

Das Beste ist jedoch, dass Sie diesen Code für alle Abrufanforderungen in der Anwendung wiederverwenden können. Dieser Code ist einfacher zu warten, zu lesen und zu testen.

POST-Anfrage


Lange Zeit werden Sie nicht überrascht sein, dass Sie die POST-Methode verwenden müssen, um Parameter im "Hauptteil" der Anforderung für die Arbeit mit der API zu übergeben.
Um eine solche Anforderung zu implementieren, müssen wir die entsprechenden Parameter im Einstellungsobjekt angeben fetch():

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

Anmeldeinformationen über Abrufanforderung senden


Wenn Sie eine Anforderung mit einigen Anmeldeinformationen senden möchten (z. B. mit einem Cookie), müssen Sie die Anmeldeinformationen in den Anforderungsoptionen so festlegen, dass sie Folgendes enthalten:

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

FAQ


Kann ich die fetch()Anfrage stornieren ?
Dies ist im Moment nicht möglich, wird aber auf GitHub aktiv diskutiert.

Gibt es eine Polydatei?
Ja,

warum ist no-cors für Servicemitarbeiter implementiert, aber nicht für Fenster?
Dies wurde aus Sicherheitsgründen durchgeführt. Weitere Details finden Sie hier .

Jetzt auch beliebt: