Eine praktische ES6-Anleitung zum Ausführen von HTTP-Anforderungen mithilfe der Fetch-API

Bild erstellt von Jad Joubran

In diesem Handbuch wird anhand einiger praktischer Beispiele gezeigt, wie Sie die Fetch-API (ES6 +) verwenden, um HTTP-Anforderungen an eine REST-API auszuführen.

Möchten Sie schnell die HTTP-Beispiele sehen? Fahren Sie mit Abschnitt 5 fort. Der erste Teil beschreibt den asynchronen Teil von JavaScript bei der Arbeit mit HTTP-Anforderungen.

Hinweis: Alle Beispiele sind in ES6 mit Pfeilfunktionen geschrieben.

Ein gängiges Muster heutiger Web- / Mobilanwendungen besteht darin, Daten vom Server anzufordern oder anzuzeigen (z. B. Benutzer, Posts, Kommentare, Abonnements, Zahlungen usw.) und diese dann mit CRUD zu bearbeiten (Erstellen, Lesen, Aktualisieren oder Löschen).

Um eine Ressource weiter zu manipulieren, verwenden wir häufig diese (empfohlenen) JS-Methoden wie .map (), .filter () und .reduce ().

Wenn Sie ein besserer Webentwickler werden, ein eigenes Unternehmen gründen, andere unterrichten oder Ihre Entwicklungsfähigkeiten verbessern möchten, werde ich wöchentlich Tipps und Tricks zu den neuesten Webentwicklungssprachen veröffentlichen.

Hier ist was wir ansprechen

  1. Umgang mit asynchronen HTTP-Anfragen von JS
  2. Was ist Ajax?
  3. Warum API abrufen?
  4. Eine kurze Einführung in die Fetch API
  5. Fetch API - CRUD-Beispiele ← the good stuff!

1. Umgang mit asynchronen HTTP-Anfragen von JS

Eine der größten Herausforderungen beim Verstehen der Funktionsweise von JavaScript (JS) ist das Verstehen des Umgangs mit asynchronen Anforderungen, was das Funktionieren von Versprechungen und Rückrufen erfordert und versteht.

In den meisten Programmiersprachen wird davon ausgegangen, dass die Operationen der Reihe nach (nacheinander) ausgeführt werden. Die erste Zeile muss ausgeführt werden, bevor wir zur nächsten Zeile übergehen können. Es ist sinnvoll, weil wir Menschen so arbeiten und alltägliche Aufgaben erledigen.

Bei JS werden jedoch mehrere Vorgänge im Hintergrund / Vordergrund ausgeführt, und es kann keine Web-App geben, die jedes Mal einfriert, wenn sie auf ein Benutzerereignis wartet.

Das Beschreiben von JavaScript als asynchron ist möglicherweise irreführend. Genauer gesagt ist JavaScript synchron und mit verschiedenen Rückrufmechanismen single-thread-fähig. Weiterlesen.

Trotzdem müssen manchmal Dinge in der richtigen Reihenfolge geschehen, andernfalls kommt es zu Chaos und unerwarteten Ergebnissen. Aus diesem Grund können wir Versprechen und Rückrufe verwenden, um es zu strukturieren. Ein Beispiel könnte das Überprüfen von Benutzeranmeldeinformationen sein, bevor mit der nächsten Operation fortgefahren wird.

2. Was ist Ajax?

AJAX steht für Asynchronous JavaScript und XML und ermöglicht die asynchrone Aktualisierung von Webseiten, indem Daten mit einem Webserver ausgetauscht werden, während die App ausgeführt wird. Kurz gesagt bedeutet dies im Wesentlichen, dass Sie Teile einer Webseite aktualisieren können, ohne die gesamte Seite neu zu laden (die URL bleibt gleich).

AJAX ist ein irreführender Name. AJAX-Anwendungen verwenden möglicherweise XML zum Transportieren von Daten, es ist jedoch ebenso üblich, Daten als Nur-Text- oder JSON-Text zu transportieren.
 - w3shools.com

AJAX den ganzen Weg?

Ich habe gesehen, dass viele Entwickler sehr aufgeregt sind, alles in einer einzigen Seitenanwendung (SPA) zu haben, und dies führt zu vielen asynchronen Problemen! Zum Glück haben wir Bibliotheken wie Angular, VueJS und React, die diesen Vorgang sehr viel einfacher und praktischer machen.

Insgesamt ist es wichtig, ein Gleichgewicht zwischen dem zu haben, was die gesamte Seite oder Teile der Seite neu laden soll.

Und in den meisten Fällen funktioniert das Neuladen von Seiten in Bezug auf die Leistungsfähigkeit der Browser einwandfrei. Früher dauerte das Neuladen einer Seite Sekunden (abhängig vom Standort des Servers und den Browserfunktionen). Die heutigen Browser sind jedoch extrem schnell. Die Entscheidung, ob AJAX oder das Neuladen von Seiten durchgeführt werden soll, ist also kein großer Unterschied.

Persönlich ist es meiner Erfahrung nach viel einfacher und schneller, eine Suchmaschine mit einer einfachen Suchschaltfläche zu erstellen, als ohne eine Schaltfläche. In den meisten Fällen ist es dem Kunden egal, ob es sich um ein SPA oder ein zusätzliches Seiten-Reload handelt. Verstehen Sie mich natürlich nicht falsch, ich liebe SPAs, aber wir müssen ein paar Kompromisse in Betracht ziehen. Wenn wir mit begrenztem Budget und fehlenden Ressourcen umgehen, ist eine schnelle Lösung vielleicht die bessere Lösung.

Letztendlich kommt es wirklich auf den Anwendungsfall an, aber ich persönlich bin der Meinung, dass SPAs mehr Entwicklungszeit und ein bisschen Kopfschmerzen erfordern als ein einfaches Neuladen von Seiten.

3. Warum API abrufen?

Auf diese Weise können deklarative HTTP-Anforderungen an einen Server ausgeführt werden. Für jede Anforderung wird ein Versprechen erstellt, das aufgelöst werden muss, um den Inhaltstyp zu definieren und auf die Daten zuzugreifen.

Der Vorteil von Fetch API besteht nun darin, dass es vollständig vom JS-Ökosystem unterstützt wird und auch Teil der MDN Mozilla-Dokumentation ist. Und zu guter Letzt funktioniert es bei den meisten Browsern (außer IE) sofort. Ich gehe davon aus, dass dies langfristig die Standardmethode für den Aufruf von Web-APIs sein wird.

Hinweis! Mir sind andere HTTP-Ansätze, wie die Verwendung von Observable mit RXJS, und deren Schwerpunkt auf Speicherverwaltung / Speicherverlust in Bezug auf Abonnieren / Abbestellen usw. bekannt. Und vielleicht wird dies die neue Standardmethode für HTTP-Anfragen, wer weiß?
Auf jeden Fall konzentriere ich mich in diesem Artikel nur auf die Fetch-API, kann aber in Zukunft einen Artikel über Observable und RXJS schreiben.

4. Eine kurze Einführung in die Fetch API

Die Methode fetch () gibt ein Promise zurück, das die Antwort von der Anforderung auf den Status (erfolgreich oder nicht erfolgreich) auflöst. Wenn Sie in Ihrem Konsolenprotokollfenster jemals das {} Nachrichtenversprechen erhalten, geraten Sie nicht in Panik. Dies bedeutet im Grunde, dass das Versprechen funktioniert, aber auf eine Lösung wartet. Um dies zu beheben, benötigen wir den .then () - Handler (Callback), um auf den Inhalt zuzugreifen.

Kurz gesagt, wir definieren zuerst den Pfad (Fetch), fordern zweitens Daten vom Server an (Request), definieren drittens den Inhaltstyp (Body) und greifen nicht zuletzt auf die Daten zu (Response).

Machen Sie sich keine Sorgen, wenn Sie Schwierigkeiten haben, dieses Konzept zu verstehen. Durch die folgenden Beispiele erhalten Sie einen besseren Überblick.

Den Pfad, den wir für unsere Beispiele verwenden werden
https://jsonplaceholder.typicode.com/users // gibt JSON zurück

5. API abrufen - HTTP-Beispiele

Wenn wir auf die Daten zugreifen möchten, benötigen wir zwei .then () - Handler (Callback). Wenn wir die Ressource jedoch manipulieren möchten, benötigen wir nur einen .then () - Handler. Wir können jedoch die zweite verwenden, um sicherzustellen, dass der Wert gesendet wurde.

Grundlegende Fetch-API-Vorlage:

Hinweis! Das obige Beispiel dient nur zur Veranschaulichung. Der Code funktioniert nicht, wenn Sie ihn ausführen.

Holen Sie sich API-Beispiele

  1. Zeige einen Benutzer
  2. Zeigt eine Liste der Benutzer an
  3. Neuen Benutzer anlegen
  4. Benutzer löschen
  5. Benutzer aktualisieren
Hinweis! Die Ressource wird nicht wirklich auf dem Server erstellt, sondern gibt ein falsches Ergebnis zurück, um einen echten Server nachzuahmen.

1. Einen Benutzer anzeigen

Wie bereits erwähnt, besteht der Prozess zum Anzeigen eines einzelnen Benutzers aus zwei .then () - Handlern (Rückruf), von denen der erste das Objekt definiert und der zweite auf die Daten zugreift.

Beachten Sie, dass wir durch Lesen der Abfragezeichenfolge / users / 2 die Funktionsweise der API verstehen / vorhersagen können. Weitere Informationen zum Schreiben einer hochwertigen REST-API finden Sie in diesem Leitlinientipp von Mahesh Haldar.

Beispiel

2. Anzeigen einer Benutzerliste

Das Beispiel ist fast identisch mit dem vorherigen Beispiel, außer dass die Abfragezeichenfolge / users und nicht / users / 2 lautet.

Beispiel

3. Neuen Benutzer anlegen

Dieser sieht ein bisschen anders aus als das vorherige Beispiel. Wenn Sie mit dem HTTP-Protokoll nicht vertraut sind, bietet es uns lediglich einige nützliche Methoden wie POST, GET, DELETE, UPDATE, PATCH und PUT. Bei diesen Methoden handelt es sich um Verben, die lediglich die Art der auszuführenden Aktion beschreiben und hauptsächlich zum Bearbeiten der Ressource / Daten auf dem Server verwendet werden.

Um einen neuen Benutzer mit der Fetch-API zu erstellen, müssen Sie auf jeden Fall das HTTP-Verb POST verwenden. Aber zuerst müssen wir es irgendwo definieren. Zum Glück gibt es ein optionales Argument Init, das wir zusammen mit der URL übergeben können, um benutzerdefinierte Einstellungen wie Methodentyp, Text, Anmeldeinformationen, Header usw. zu definieren.

Anmerkung: Die Parameter der Methode fetch () sind mit denen des Konstruktors Request () identisch.

Beispiel

4. Löschen eines Benutzers

Um den Benutzer zu löschen, müssen wir zuerst mit / users / 1 auf den Benutzer abzielen und dann den Methodentyp DELETE definieren.

Beispiel

5. Benutzer aktualisieren

Das HTTP-Verb PUT wird zum Bearbeiten der Zielressource verwendet. Wenn Sie teilweise Änderungen vornehmen möchten, müssen Sie PATCH verwenden. Weitere Informationen zur Funktionsweise dieser HTTP-Verben finden Sie hier.

Beispiel

Fazit

Jetzt haben Sie grundlegende Kenntnisse darüber, wie Sie mithilfe der Fetch-API von JavaScript eine Ressource vom Server abrufen oder bearbeiten und wie Sie mit Versprechungen umgehen. Sie können diesen Artikel als Leitfaden für die Strukturierung Ihrer API-Anforderungen für CRUD-Vorgänge verwenden.

Persönlich bin ich der Meinung, dass die Fetch-API deklarativ ist und Sie leicht verstehen können, was passiert, ohne über technische Erfahrung im Codieren zu verfügen.

Alle Beispiele werden in einer Promised-Base-Anfrage gezeigt, in der wir die Anfrage mit .then callback verketten. Dies ist ein Standardansatz, mit dem viele Entwickler vertraut sind. Wenn Sie jedoch async / await verwenden möchten, lesen Sie diesen Artikel. Das Konzept ist das gleiche, außer dass async / await leichter zu lesen und zu schreiben ist.

Hier sind ein paar Artikel, die ich über das Web-Ökosystem geschrieben habe, sowie Tipps und Tricks zur persönlichen Programmierung.

  • Ein Vergleich zwischen Angular und React
  • Ein chaotischer Verstand führt zu chaotischem Code
  • Entwickler, die ständig neue Dinge lernen wollen
  • Eine praktische Anleitung zu ES6-Modulen
  • Lernen Sie diese grundlegenden Webkonzepte kennen
  • Steigern Sie Ihre Fähigkeiten mit diesen wichtigen JavaScript-Methoden
  • Programmieren Sie schneller, indem Sie benutzerdefinierte Bash-Befehle erstellen

Sie finden mich auf Medium, wo ich wöchentlich veröffentliche. Oder folgen Sie mir auf Twitter, wo ich relevante Tipps und Tricks zur Webentwicklung zusammen mit persönlichen Geschichten veröffentliche.

P.S. Wenn dir dieser Artikel gefallen hat und du mehr davon haben möchtest, klatsche ❤ und teile ihn mit Freunden, die ihn möglicherweise benötigen. Das ist gutes Karma.