Vollständiger Leitfaden zur Fetch-API

Einführung in die Fetch-API

Die Fetch API ist eine moderne, native JavaScript-API, die es Ihnen ermöglicht, HTTP-Anfragen auf einfache und flexible Weise zu stellen. Es bietet eine einfachere und sauberere Alternative zu älteren Technologien wie XMLHttpRequest. Fetch basiert auf Versprechen, was bedeutet, dass es gut mit modernen JavaScript-Funktionen wie async/await und .then()-Verkettung funktioniert.

Die Fetch-API bietet eine leicht verständliche Möglichkeit zur Interaktion mit RESTful-APIs und verarbeitet sowohl einfache als auch komplexe Anfragen. Es wird in modernen Browsern weitgehend unterstützt und ist ein gängiges Tool für die Webentwicklung.

Hauptfunktionen der Fetch-API:

1. Versprechensbasiert: Basiert auf Versprechen und bietet eine einfache und intuitive Möglichkeit, asynchronen Code zu verwalten.
2. Unterstützt alle HTTP-Methoden: GET, POST, PUT, DELETE, PATCH usw.
3. Keine Rückrufhölle: Dank Promises werden verschachtelte Rückrufe vermieden.
4. Stream-Unterstützung: Fetch unterstützt Streams, wodurch es für die effiziente Verarbeitung großer Datenmengen geeignet ist.
5. Verbesserte Fehlerbehandlung: Im Gegensatz zu XMLHttpRequest lehnt die Fetch-API einen HTTP-Fehlerstatus (z. B. 404 oder 500) nicht ab. Sie müssen diese manuell bearbeiten.

Installation

Die Fetch-API ist in moderne Webbrowser integriert, sodass Sie nichts installieren müssen, wenn Sie in einer Browserumgebung arbeiten. Es ist nativ verfügbar und kann zum Senden von HTTP-Anfragen verwendet werden.

Wenn Sie jedoch in einer Node.js-Umgebung arbeiten (wo Fetch nicht nativ unterstützt wird), können Sie ein Polyfill wie Node-Fetch installieren.

1. Verwenden von npm (für Node.js-Umgebung):

Wenn Sie in einer Node.js-Umgebung arbeiten und Fetch verwenden müssen, können Sie node-fetch installieren:

npm install node-fetch

Dann importieren Sie es in Ihr Projekt:

const fetch = require('node-fetch');

Verwenden der Fetch-API

Die Fetch-API bietet eine globale fetch()-Funktion, mit der Sie HTTP-Anfragen stellen können. Diese Funktion gibt ein Promise zurück, das in das Response-Objekt aufgelöst wird, das die Antwort auf die Anfrage darstellt.

Syntax

fetch(url, [options])

Parameter

1. URL:

   • Typ: Zeichenfolge
   • Beschreibung: Die URL, an die die Anfrage gesendet wird. Dies kann eine vollständige URL oder eine relative URL basierend auf der in der Anfrage definierten Basis-URL sein.

2. Optionen (optional):

   • Typ: Objekt
   • Beschreibung: Ein optionales Konfigurationsobjekt zum Ändern der Anfrage. Einige gängige Optionen sind:
     • Methode: Die HTTP-Methode (z. B. GET, POST, PUT, DELETE).
     • Header: Benutzerdefinierte Header, die in die Anfrage einbezogen werden sollen (z. B. Content-Type, Authorization).
     • body: Der Anfragetext (nur für Methoden wie POST oder PUT).
     • Modus: Steuert Cross-Origin-Anfragen. (z. B. „cors“, „no-cors“, „same-origin“).
     • Cache: Gibt an, wie die Anfrage mit dem Cache interagiert (z. B. „No-Store“, „Reload“).
     • Anmeldeinformationen: Steuert Cookies und Authentifizierung (z. B. „same-origin“, „include“).

Basic Fetch Request (GET)

Eine einfache GET-Anfrage mit der Fetch-API ist unkompliziert. Die Funktion fetch() stellt eine Anfrage an die bereitgestellte URL und gibt ein Promise zurück, das mit dem Response-Objekt aufgelöst wird.

Beispielcode:

Hier ist ein Beispiel für eine einfache GET-Anfrage mit der Fetch-API:

npm install node-fetch

Erklärung:

• fetch() initiiert die Anfrage an die angegebene URL.
• .then(response => Response.json()): Konvertiert das Response-Objekt in ein JavaScript-Objekt durch Parsen der JSON-Daten.
• .catch(): Fängt und protokolliert alle Fehler, wie z. B. Netzwerkfehler oder fehlgeschlagene Anfragen.

POST-Anfragen mit Fetch stellen

Mit der Fetch-API können Sie auch POST-Anfragen stellen. POST-Anfragen werden normalerweise zum Senden von Daten an einen Server verwendet, z. B. zum Senden eines Formulars oder zum Erstellen einer neuen Ressource.

Syntax für POST-Anfrage:

const fetch = require('node-fetch');

Beispielcode:

Hier ist ein Beispiel für eine POST-Anfrage, die Daten an den Server sendet:

fetch(url, [options])

Erklärung:

• Methode: 'POST': Gibt an, dass es sich um eine POST-Anfrage handelt.
• body: JSON.stringify(postData): Konvertiert die Daten in einen JSON-String, bevor sie im Anfragetext gesendet werden.
• Header: Setzt den Content-Type-Header auf application/json, um anzugeben, dass die gesendeten Daten im JSON-Format vorliegen.

Umgang mit Antwortdaten

Das von der Fetch-API zurückgegebene Antwortobjekt enthält mehrere Eigenschaften und Methoden für die Interaktion mit den Antwortdaten.

Wichtige Eigenschaften und Reaktionsmethoden:

1. response.json(): Analysiert den Antworttext als JSON.
2. response.text(): Analysiert den Antworttext als Zeichenfolge.
3. response.blob(): Analysiert die Antwort als binäres großes Objekt (nützlich für die Verarbeitung von Bildern oder Dateien).
4. response.ok: Ein boolescher Wert, der angibt, ob der Antwortstatuscode im Bereich 200-299 (erfolgreich) liegt.
5. response.status: Der HTTP-Statuscode der Antwort (z. B. 200 für Erfolg, 404 für nicht gefunden).
6. response.headers: Die vom Server als Antwort auf die Anfrage zurückgegebenen Header.

Beispielcode:

Hier ist ein Beispiel für den Umgang mit verschiedenen Arten von Antwortdaten:

npm install node-fetch

Erklärung:

• response.ok prüft, ob die Antwort erfolgreich war (Statuscode 200-299). Wenn nicht, wird ein Fehler ausgegeben.
• response.json() wird aufgerufen, um die Antwort als JavaScript-Objekt zu analysieren.

Umgang mit Fehlern beim Abruf

Im Gegensatz zu XMLHttpRequest lehnt die Fetch-API einen HTTP-Fehlerstatus (z. B. 404 oder 500) nicht automatisch ab. Es wird nur abgelehnt, wenn ein Netzwerkfehler vorliegt oder die Anfrage blockiert ist. Um Fehler wie 404 oder 500 zu behandeln, müssen Sie die Eigenschaft „response.ok“ überprüfen.

Beispiel zur Fehlerbehandlung:

Hier ist ein Beispiel für den effektiven Umgang mit Fehlern in Fetch:

const fetch = require('node-fetch');

Erklärung:

• response.ok: Dies prüft, ob der Antwortstatuscode im Bereich von 200–299 liegt (was auf Erfolg hinweist).
• Wenn die Anfrage fehlschlägt (z. B. 404- oder 500-Fehler), wird ein Fehler mit dem entsprechenden Statuscode ausgegeben.

Fazit

Die Fetch API ist ein leistungsstarkes und modernes Tool zum Erstellen von HTTP-Anfragen in JavaScript. Es bietet eine saubere und intuitive Möglichkeit, mit REST-APIs zu arbeiten, und seine auf Versprechen basierende Architektur erleichtert die Verwaltung von asynchronem Code. Mit seiner Unterstützung für alle HTTP-Methoden, Fehlerbehandlung und Antwortanalyse ist Fetch ein unverzichtbares Tool für Webentwickler.

Ob Sie Daten abrufen, Formulare übermitteln oder die Authentifizierung durchführen, die Fetch-API bietet Flexibilität und Kontrolle über Ihre HTTP-Anfragen und ist damit eine ausgezeichnete Wahl für moderne Webanwendungen.

Das obige ist der detaillierte Inhalt vonVollständiger Leitfaden zur Fetch-API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!