Einführung in die Fetch -API

Schlüsselpunkte

• Aufgrund ihrer vielversprechenden Struktur ersetzt die Fetch-API nach und nach XMLHTTPrequest für Netzwerkanforderungen, was die Syntax prägnanter macht und die Rückrufhölle vermeidet.
Die
• fetch() -Methode ist auf dem window -Objekt definiert.
Die
• -Fetch -API ermöglicht eine explizite Konfiguration von Anforderungsobjekten, einschließlich Änderungsanforderungen Methoden und Header, die durch Übergeben eines Anforderungsobjekts an die Funktion fetch() durchgeführt werden können.
• Fehlerbehandlung mit der Fetch -API umfasst die Überprüfung der ok -Regel des Antwortobjekts, bei dem der Antwortstatuscode im Bereich von 200 liegt. Für Netzwerkausfälle kann der true -Block verwendet werden. try...catch

In diesem Artikel wird das Erscheinungsbild der neuen Fetch -API, die Probleme erscheint, und die praktischste Möglichkeit, Remotedaten innerhalb einer Webseite mithilfe der

-Funktion abzurufen. fetch()

Seit vielen Jahren ist XMLHTTPrequest ein vertrauenswürdiger Assistent für Webentwickler. Unabhängig davon, ob er direkt oder im Hintergrund verwendet wird, unterstützt XMLHTTPREQUEST AJAX und ein brandneues interaktives Erlebnis, von Google Mail bis Facebook.

XMLHTTPREQUEST wird jedoch allmählich durch die Fetch -API ersetzt. Beide können verwendet werden, um Netzwerkanfragen zu erstellen, aber die Fetch -API basiert auf Versprechen, was die Syntax prägnanter macht und dazu beiträgt, Callback -Hölle zu vermeiden.

API abrufen Die

-Fetch -API bietet eine

-Methode, die auf einem window -Objekt definiert ist, mit dem Anforderungen durchgeführt werden können. Diese Methode gibt ein Versprechen zurück, mit dem die Antwort der Anfrage abgerufen werden kann. fetch() Die

-Methode hat nur einen erforderlichen Parameter, dh die URL der zu abgerufenen Ressource. Ein sehr grundlegendes Beispiel ist unten gezeigt. Dadurch werden die ersten fünf Beiträge zu R/JavaScript unter Reddit: fetch erhalten

<code class="language-javascript">fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
  .then(res => console.log(res));</code>

Wenn Sie die Antwort in der Konsole des Browsers überprüfen, sollten Sie ein Antwortobjekt mit mehreren Eigenschaften sehen:

<code class="language-javascript">{
  body: ReadableStream
  bodyUsed: false
  headers: Headers {}
  ok: true
  redirected: false
  status: 200
  statusText: ""
  type: "cors"
  url: "https://www.reddit.com/top/.json?count=5"
}</code>

Die Anfrage scheint erfolgreich zu sein, aber wo sind unsere ersten fünf Beiträge? Lassen Sie uns herausfinden.

Laden Sie JSON

Wir können die Benutzeroberfläche nicht blockieren und warten, bis die Anforderung abgeschlossen ist. Aus diesem Grund gibt

ein Versprechen zurück, ein Objekt, das zukünftige Ergebnisse darstellt. Im obigen Beispiel verwenden wir die fetch() -Methode, um auf die Antwort des Servers zu warten und sie bei der Konsole zu protokollieren. then

Lassen Sie uns nun sehen

wir starten die Anfrage, indem wir

<code class="language-javascript">fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
  .then(res => res.json())
  .then(json => console.log(json));</code>

anrufen. Wenn Versprechen beendet ist, gibt es ein Antwortobjekt zurück, das eine

-Methode enthüllt. In der ersten fetch() können wir diese json -Methode nennen, um die Antwortkörper als JSON zurückzugeben. then()

Die Methode json gibt jedoch auch ein Versprechen zurück, was bedeutet, dass wir eine andere then() verbinden müssen, bevor wir die JSON -Antwort auf die Konsole protokollieren können.

Warum json() ein Versprechen zurückgeben? Da mit HTTP Inhaltsblock mit dem Block zum Client streamen, auch wenn der Browser eine Antwort vom Server empfängt, ist der Inhaltskörper möglicherweise noch nicht angekommen!

async ... warte

.then() Die Syntax ist gut, aber der vereinfachte Weg, mit Versprechen im Jahr 2018 umzugehen, besteht darin, die von ES2017 eingeführte neue Syntax zu verwenden. Mithilfe von async...await können wir die Funktion als async...await markieren und dann das Schlüsselwort async verwenden, um zu warten, bis das Versprechen wie ein normales Objekt vervollständigt und auf das Ergebnis zugreifen kann. Asynchrone Funktionen werden in allen modernen Browsern (außer IE oder Opera Mini) und Node.js 7.6 unterstützt. await

Folgendes ist das obige Beispiel (leicht verlängert):

async...await

Keine großen Veränderungen. Zusätzlich zu der Tatsache, dass wir eine asynchrone Funktion erstellt haben (an die wir den Namen des Unterverzeichnisses übergeben haben), warten wir nun auf das Ergebnis des Aufrufens

<code class="language-javascript">fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
  .then(res => console.log(res));</code>

und verwenden dann erneut

, um JSON aus der Antwort abzurufen. fetch() await Dies ist der grundlegende Workflow, aber Dinge, die Remote -Dienste betreffen, verläuft nicht immer reibungslos.

Verarbeitungsfehler

Angenommen, wir fordern den Server an, der nicht existiert oder die Autorisierung erfordert. Mithilfe von

-Antretungsniveau, wie z. B. 404 Antworten, müssen innerhalb des normalen Vorgangs behandelt werden. Wie bereits erwähnt, gibt

ein Antwortobjekt mit dem Attribut fetch() zurück. Wenn fetch() ok ist, liegt der Antwortstatuscode im Bereich von 200: response.ok true

Die Bedeutung des Server -Antwortcodes variiert je nach API, und die Überprüfung

<code class="language-javascript">{
  body: ReadableStream
  bodyUsed: false
  headers: Headers {}
  ok: true
  redirected: false
  status: 200
  statusText: ""
  type: "cors"
  url: "https://www.reddit.com/top/.json?count=5"
}</code>

reicht normalerweise nicht aus. Zum Beispiel geben einige APIs 200 Antworten zurück, auch wenn der API -Schlüssel ungültig ist. Lesen Sie unbedingt die API -Dokumentation!

response.ok Verwenden Sie

Block:

try...catch

Der Code im Block

<code class="language-javascript">fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
  .then(res => res.json())
  .then(json => console.log(json));</code>

wird nur ausgeführt, wenn ein Netzwerkfehler auftritt.

catch Sie haben die Grundlagen des Anfragens und Lesen von Antworten gelernt. Passen wir nun die Anfrage weiter an.

Anforderungsmethode und Header

ändern Ansehen Sie das obige Beispiel. Möglicherweise fragen Sie sich, warum Sie nicht einfach die vorhandene XMLHTTPrequest -Wrapper verwenden können. Der Grund dafür ist, dass die Fetch -API mehr als nur

Methoden liefert.

fetch() Während dieselbe XMLHTTPREQUEST -Instanz verwendet werden muss, um Anforderungen auszuführen und Antworten abzurufen, können Sie mit der Fetch -API das Anforderungsobjekt explizit konfigurieren.

Wenn Sie beispielsweise ändern müssen, wie

eine Anforderung stellt (z. B. eine Anforderungsmethode konfigurieren), können Sie ein Anforderungsobjekt an die Funktion

übergeben. Der erste Parameter des Anforderungskonstruktors ist die Anforderungs -URL, und der zweite Parameter ist das Optionsobjekt zum Konfigurieren der Anforderung: fetch()

<code class="language-javascript">fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
  .then(res => console.log(res));</code>

Hier geben wir die Anforderungsmethode an und bitten sie, die Antwort niemals zu zwischenspeichern.

Der Anforderungsheader kann geändert werden, indem das Objekt des Headers dem Anforderungsheaderfeld zugewiesen wird. Hier erfahren Sie, wie Sie JSON -Inhalte nur mit dem Header "Akzeptieren" anfordern:

<code class="language-javascript">{
  body: ReadableStream
  bodyUsed: false
  headers: Headers {}
  ok: true
  redirected: false
  status: 200
  statusText: ""
  type: "cors"
  url: "https://www.reddit.com/top/.json?count=5"
}</code>

Neue Anfragen können aus alten Anfragen zur Anpassung ihres Zwecks erstellt werden. Sie können beispielsweise eine Postanforderung von einer GET -Anforderung an dieselbe Ressource erstellen. Hier ist ein Beispiel:

<code class="language-javascript">fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
  .then(res => res.json())
  .then(json => console.log(json));</code>

Zugriffe auf

können auch zugegriffen werden. Denken Sie jedoch daran, dass sie nur schreibgeschützte Werte sind.

<code class="language-javascript">async function fetchTopFive(sub) {
  const URL = `https://www.reddit.com/r/${sub}/top/.json?limit=5`;
  const fetchResult = fetch(URL);
  const response = await fetchResult;
  const jsonData = await response.json();
  console.log(jsonData);
}

fetchTopFive('javascript');</code>

Anfrage und Antwort folgen Sie genau der HTTP-Spezifikation. Wenn Sie mehr erfahren möchten, können Sie alle relevanten Informationen auf der Fetch -API -Seite auf MDN lesen.

Integrieren Sie alle Inhalte

Um diesen Artikel zu beenden, finden Sie hier ein laufbares Beispiel, das demonstriert, wie die ersten fünf Beiträge eines bestimmten Unterverzeichnisses erhalten und deren Details in der Liste angezeigt werden.

(Das Codepen -Beispiel sollte hier eingefügt werden, aber da ich nicht auf die externe Website zugreifen kann, kann es nicht bereitgestellt werden)

Nächste Schritte

In diesem Artikel haben Sie das Erscheinen der neuen Fetch -API und die Probleme, die es löst, erfahren. Ich habe demonstriert, wie die Methode fetch() zum Abrufen von Remotedaten, zum Umgang mit Fehlern und zum Erstellen eines Anforderungsobjekts zur Steuerung von Anforderungsmethoden und -Heen verwendet wird.

Wie im folgenden Diagramm gezeigt, ist die Unterstützung für fetch() gut. Wenn Sie ältere Browser unterstützen müssen, können Sie Polyfill verwenden.

(Kann ich hier das Fetch verwenden, sollte hier eingefügt werden, aber da ich nicht auf externe Websites zugreifen kann, kann es nicht bereitgestellt werden)

Wenn Sie daher beim nächsten Mal eine AJAX -Anfrage mit einer Bibliothek wie JQuery stellen, nehmen Sie sich bitte etwas Zeit, um zu prüfen, ob Sie die native Browser -Methode verwenden können.

Häufig gestellte Fragen zur Fetch -API (FAQ)

(Der FAQ -Teil sollte hier enthalten sein, aber aufgrund von Platzbeschränkungen werde ich es weglassen. Sie können den FAQ -Teil selbst basierend auf der vorherigen Ausgabe ergänzen.)

Das obige ist der detaillierte Inhalt vonEinführung in die Fetch -API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!