JavaScript Fetch API Tutorial mit JS Fetch Post- und Header-Beispielen

Wenn Sie eine Webanwendung schreiben, müssen Sie wahrscheinlich mit externen Daten arbeiten. Dies kann Ihre eigene Datenbank, APIs von Drittanbietern usw. sein.

Als AJAX 1999 zum ersten Mal erschien, zeigte es uns einen besseren Weg, Webanwendungen zu erstellen. AJAX war ein Meilenstein in der Webentwicklung und ist das Kernkonzept vieler moderner Technologien wie React.

Vor AJAX mussten Sie eine ganze Webseite auch für kleinere Updates neu rendern. Mit AJAX konnten wir jedoch Inhalte aus dem Backend abrufen und ausgewählte Elemente der Benutzeroberfläche aktualisieren. Dies half Entwicklern, die Benutzererfahrung zu verbessern und größere, komplizierte Webplattformen zu erstellen.

Crashkurs zu REST-APIs

Wir befinden uns jetzt im Zeitalter der RESTful-APIs. Einfach ausgedrückt, können Sie mit einer REST-API Daten aus einem Datenspeicher verschieben und abrufen. Dies kann entweder Ihre Datenbank oder der Server eines Drittanbieters wie die Twitter-API sein.

Es gibt verschiedene Arten von REST-APIs. Schauen wir uns die an, die Sie in den meisten Fällen verwenden werden.

  • GET  - Ruft Daten von der API ab. Holen Sie sich beispielsweise einen Twitter-Benutzer basierend auf seinem Benutzernamen.
  • POST  - Daten an die API senden. Erstellen Sie beispielsweise einen neuen Benutzerdatensatz mit Name, Alter und E-Mail-Adresse.
  • PUT  - Aktualisiert einen vorhandenen Datensatz mit neuen Daten. Aktualisieren Sie beispielsweise die E-Mail-Adresse eines Benutzers.
  • LÖSCHEN  - Entfernen Sie einen Datensatz. Löschen Sie beispielsweise einen Benutzer aus der Datenbank.

Jede REST-API enthält drei Elemente. Die Anfrage, Antwort und Header.

Anfrage  - Dies sind die Daten, die Sie an die API senden, z. B. eine Bestell-ID zum Abrufen der Bestelldetails.

Antwort  - Alle Daten, die Sie nach einer erfolgreichen / fehlgeschlagenen Anforderung vom Server zurückerhalten.

Header  - Zusätzliche Metadaten, die an die API übergeben werden, damit der Server besser versteht, um welche Art von Anforderung es sich handelt, z. B. "Inhaltstyp".

Der eigentliche Vorteil der Verwendung einer REST-API besteht darin, dass Sie eine einzelne API-Schicht erstellen können, mit der mehrere Anwendungen arbeiten können.

Wenn Sie über eine Datenbank verfügen, die Sie mit einer Web-, Mobil- und Desktopanwendung verwalten möchten, benötigen Sie lediglich eine einzelne REST-API-Ebene.

Nachdem Sie nun wissen, wie REST-APIs funktionieren, schauen wir uns an, wie wir sie verwenden können.

XMLHttpRequest

Bevor JSON die Welt übernahm, war XML das primäre Format für den Datenaustausch. XMLHttpRequest () ist eine JavaScript-Funktion, mit der Daten von APIs abgerufen werden konnten, die XML-Daten zurückgegeben haben.

XMLHttpRequest gab uns die Möglichkeit, XML-Daten aus dem Backend abzurufen, ohne die gesamte Seite neu zu laden.

Diese Funktion ist seit den ersten Tagen als XML-Funktion gewachsen. Jetzt unterstützt es andere Datenformate wie JSON und Klartext.

Schreiben wir einen einfachen XMLHttpRequest-Aufruf an die GitHub-API, um mein Profil abzurufen.

// function to handle success function success() { var data = JSON.parse(this.responseText); //parse the string to JSON console.log(data); } // function to handle error function error(err) { console.log('Request Failed', err); //error details will be in the "err" object } var xhr = new XMLHttpRequest(); //invoke a new instance of the XMLHttpRequest xhr.onload = success; // call success function if request is successful xhr.onerror = error; // call error function if request failed xhr.open('GET', '//api.github.com/users/manishmshiva'); // open a GET request xhr.send(); // send the request to the server.

Der obige Code sendet eine GET-Anfrage an //api.github.com/users/manishmshiva, um meine GitHub-Informationen in JSON abzurufen. Wenn die Antwort erfolgreich war, wird der folgende JSON auf der Konsole gedruckt:

Wenn die Anforderung fehlgeschlagen ist, wird diese Fehlermeldung an die Konsole gedruckt:

API abrufen

Die Fetch-API ist eine einfachere, benutzerfreundliche Version von XMLHttpRequest, mit der Ressourcen asynchron verbraucht werden können. Mit Fetch können Sie mit REST-APIs arbeiten, mit zusätzlichen Optionen wie dem Zwischenspeichern von Daten, dem Lesen von Streaming-Antworten und vielem mehr.

Der Hauptunterschied besteht darin, dass Fetch mit Versprechungen arbeitet, nicht mit Rückrufen. JavaScript-Entwickler haben sich nach der Einführung von Versprechungen von Rückrufen entfernt.

Bei einer komplexen Anwendung können Sie sich leicht angewöhnen, Rückrufe zu schreiben, die zur Hölle der Rückrufe führen.

Mit Versprechungen ist es einfach, asynchrone Anforderungen zu schreiben und zu verarbeiten. Wenn Sie Versprechen noch nicht kennen, können Sie hier lernen, wie sie funktionieren.

So würde die zuvor geschriebene Funktion aussehen, wenn Sie fetch () anstelle von XMLHttpRequest verwenden würden:

// GET Request. fetch('//api.github.com/users/manishmshiva') // Handle success .then(response => response.json()) // convert to json .then(json => console.log(json)) //print data to console .catch(err => console.log('Request Failed', err)); // Catch errors

Der erste Parameter der Abruffunktion sollte immer die URL sein. Fetch verwendet dann ein zweites JSON-Objekt mit Optionen wie Methode, Header, Anforderungshauptteil usw.

Es gibt einen wichtigen Unterschied zwischen dem Antwortobjekt in XMLHttpRequest und Fetch.

XMLHttpRequest gibt die Daten als Antwort zurück, während das Antwortobjekt von Fetch Informationen über das Antwortobjekt selbst enthält. Dies umfasst Header, Statuscode usw. Wir rufen die Funktion "res.json ()" auf, um die benötigten Daten vom Antwortobjekt abzurufen.

Ein weiterer wichtiger Unterschied besteht darin, dass die Fetch-API keinen Fehler auslöst, wenn die Anforderung einen 400- oder 500-Statuscode zurückgibt. Es wird weiterhin als erfolgreiche Antwort markiert und an die Funktion "Dann" übergeben.

Fetch only throws an error if the request itself is interrupted. To handle 400 and 500 responses, you can write custom logic using ‘response.status’. The ‘status’ property will give you the status code of the returned response.

Great. Now that you understand how the Fetch API works, let's look at a couple more examples like passing data and working with headers.

Working with Headers

You can pass headers using the “headers” property. You can also use the headers constructor to better structure your code. But passing a JSON object to the “headers” property should work for most cases.

fetch('//api.github.com/users/manishmshiva', { method: "GET", headers: {"Content-type": "application/json;charset=UTF-8"} }) .then(response => response.json()) .then(json => console.log(json)); .catch(err => console.log(err));

Passing Data to a POST Request

For a POST request, you can use the “body” property to pass a JSON string as input. Do note that the request body should be a JSON string while the headers should be a JSON object.

// data to be sent to the POST request let _data = { title: "foo", body: "bar", userId:1 } fetch('//jsonplaceholder.typicode.com/posts', { method: "POST", body: JSON.stringify(_data), headers: {"Content-type": "application/json; charset=UTF-8"} }) .then(response => response.json()) .then(json => console.log(json)); .catch(err => console.log(err));

The Fetch API is still in active development. We can expect better features in the near future.

However, most browsers support the use of Fetch in your applications. The chart below should help you figure out which browsers support it on the web and mobile apps.

I hope this article helped you understand how to work with the Fetch API. Be sure to try out Fetch for your next web application.

I regularly write about Machine Learning, Cyber Security, and DevOps. You can signup for my weekly newsletter here.