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

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

Möchten Sie die HTTP-Beispiele schnell 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 in heutigen Web- / Mobilanwendungen besteht darin, Daten vom Server anzufordern oder anzuzeigen (z. B. Benutzer, Beiträge, Kommentare, Abonnements, Zahlungen usw.) und diese dann mithilfe von CRUD zu bearbeiten (erstellen, lesen, Aktualisieren oder Löschen).

Um weiterhin eine Ressource zu manipulieren, verwenden wir häufig diese JS Methoden (empfohlen) 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 werden

  1. Umgang mit asynchronen HTTP-Anforderungen von JS
  2. Was ist AJAX?
  3. Warum API abrufen?
  4. Eine kurze Einführung in die Fetch API
  5. Fetch API - CRUD Beispiele ← das gute Zeug!

1. Umgang mit asynchronen HTTP-Anforderungen von JS

Eine der schwierigsten Aufgaben beim Verständnis der Funktionsweise von JavaScript (JS) ist das Verständnis des Umgangs mit asynchronen Anforderungen, was das Funktionieren von Versprechungen und Rückrufen erfordert.

In den meisten Programmiersprachen glauben wir, dass die Operationen in der richtigen Reihenfolge (nacheinander) ablaufen. 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 tägliche Aufgaben erledigen.

Mit JS haben wir jedoch mehrere Vorgänge, die im Hintergrund / Vordergrund ausgeführt werden, und wir können keine Web-App haben, die jedes Mal einfriert, wenn sie auf ein Benutzerereignis wartet.

JavaScript als asynchron zu beschreiben, ist möglicherweise irreführend. Es ist genauer zu sagen, dass JavaScript synchron und Single-Threaded mit verschiedenen Rückrufmechanismen ist. Weiterlesen.

Trotzdem müssen manchmal Dinge in der richtigen Reihenfolge geschehen, sonst führt dies 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 dem nächsten Vorgang fortgefahren wird.

2. Was ist AJAX?

AJAX steht für Asynchronous JavaScript and XML und ermöglicht die asynchrone Aktualisierung von Webseiten durch Datenaustausch mit einem Webserver, 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 Klartext oder JSON-Text zu transportieren.

- w3shools.com

AJAX den ganzen Weg?

Ich habe gesehen, dass viele Entwickler sehr aufgeregt sind, alles in einer Single-Page-Anwendung (SPA) zu haben, und dies führt zu vielen asynchronen Schmerzen! Glücklicherweise haben wir Bibliotheken wie Angular, VueJS und React, die diesen Prozess viel einfacher und praktischer machen.

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

In den meisten Fällen funktioniert ein erneutes Laden von Seiten in Bezug auf die Leistungsfähigkeit von Browsern einwandfrei. Früher dauerte ein erneutes Laden der Seite Sekunden (abhängig vom Standort des Servers und den Browserfunktionen). Die heutigen Browser sind jedoch extrem schnell, sodass die Entscheidung, ob AJAX oder das Neuladen von Seiten durchgeführt werden soll, keinen großen Unterschied darstellt.

Meine persönliche Erfahrung ist, dass es viel einfacher und schneller ist, 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 erneutes Laden von Seiten 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 zu tun haben, ist eine schnelle Lösung vielleicht ein besserer Ansatz.

Letztendlich hängt es wirklich vom Anwendungsfall ab, aber ich persönlich bin der Meinung, dass SPAs mehr Entwicklungszeit und ein wenig Kopfschmerzen erfordern als ein einfaches erneutes Laden von Seiten.

3. Warum API abrufen?

Dies ermöglicht es uns, deklarative HTTP-Anforderungen an einen Server auszuführen. Für jede Anforderung wird eine erstellt, Promisedie aufgelöst werden muss, um den Inhaltstyp zu definieren und auf die Daten zuzugreifen.

Der Vorteil der Fetch-API besteht nun darin, dass sie vom JS-Ökosystem vollständig unterstützt wird und auch Teil der MDN Mozilla-Dokumente ist. Und last but not least funktioniert es in den meisten Browsern (außer IE) sofort. Langfristig denke ich, dass dies die Standardmethode zum Aufrufen von Web-APIs sein wird.

Hinweis! Mir sind andere HTTP-Ansätze wie die Verwendung von Observable mit RXJS und die Konzentration auf Speicherverwaltung / -leck in Bezug auf Abonnieren / Abbestellen usw. bekannt. Und vielleicht wird das die neue Standardmethode für HTTP-Anfragen, wer weiß?

Wie auch immer, in diesem Artikel konzentriere ich mich 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 fetch()Methode gibt ein zurück Promise, das das Responsevon auflöst Request, um den Status anzuzeigen (erfolgreich oder nicht). Wenn Sie diese Meldung jemals promise {}in Ihrem Konsolenprotokollbildschirm erhalten, geraten Sie nicht in Panik - dies bedeutet im Grunde, dass dies Promisefunktioniert, aber darauf wartet, behoben zu werden. Um das Problem zu beheben, benötigen wir den .then()Handler (Rückruf), um auf den Inhalt zugreifen zu können.

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 ).

Wenn Sie Schwierigkeiten haben, dieses Konzept zu verstehen, machen Sie sich keine Sorgen. Anhand der folgenden Beispiele erhalten Sie einen besseren Überblick.

The path we'll be using for our examples //jsonplaceholder.typicode.com/users // returns JSON

5. API abrufen - HTTP-Beispiele

Wenn wir auf die Daten zugreifen möchten, benötigen wir zwei .then()Handler (Rückruf). Wenn wir die Ressource jedoch manipulieren möchten, benötigen wir nur einen .then()Handler. Wir können jedoch den zweiten 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.

API-Beispiele abrufen

  1. Einen Benutzer anzeigen
  2. Anzeigen einer Benutzerliste
  3. Neuen Benutzer erstellen
  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 /users/2wir durch Lesen der Abfragezeichenfolge verstehen / vorhersagen können, was die API tut. Weitere Informationen zum Schreiben einer hochwertigen REST-API finden Sie in diesem Richtlinien-Tipp von Mahesh Haldar.

Beispiel

2. Anzeigen einer Benutzerliste

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

Beispiel

3. Neuen Benutzer erstellen

Dieser sieht etwas anders aus als das vorherige Beispiel. Wenn Sie nicht vertraut mit dem HTTP - Protokoll sind, bietet es uns einfach mit ein paar süßen Methoden wie POST, GET, DELETE, UPDATE, PATCHund PUT. Diese Methoden sind Verben, die einfach 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 das HTTP-Verb verwenden POST. Aber zuerst müssen wir es irgendwo definieren. Glücklicherweise gibt es ein optionales Argument, das Initwir zusammen mit der URL zum Definieren benutzerdefinierter Einstellungen wie Methodentyp, Text, Anmeldeinformationen, Header usw. weitergeben können.

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

Beispiel

4. Benutzer löschen

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

Beispiel

5. Aktualisieren eines Benutzers

Das HTTP-Verb PUTwird zum Bearbeiten der Zielressource verwendet. Wenn Sie teilweise Änderungen vornehmen möchten, müssen Sie diese verwenden PATCH. Weitere Informationen zu den Funktionen dieser HTTP-Verben finden Sie hier.

Beispiel

Fazit

Jetzt haben Sie ein grundlegendes Verständnis dafür, wie Sie eine Ressource mithilfe der JavaScript-Abruf-API 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-Operationen verwenden.

Persönlich halte ich die Fetch-API für deklarativ und Sie können leicht verstehen, was ohne technische Codierungserfahrung passiert.

Alle Beispiele werden in einer versprochenen Basisanfrage gezeigt, in der wir die Anfrage per .thenRückruf verketten. Dies ist ein Standardansatz, mit dem viele Entwickler vertraut sind. Wenn Sie async/awaitdiesen Artikel verwenden möchten, lesen Sie diesen Artikel. Das Konzept ist das gleiche, außer dass async/awaites leichter zu lesen und zu schreiben ist.

Hier sind einige Artikel, die ich über das Web-Ökosystem geschrieben habe, sowie persönliche Programmiertipps und -tricks.

  • Ein Vergleich zwischen Angular und React
  • Ein chaotischer Geist führt zu chaotischem Code
  • Entwickler, die ständig neue Dinge lernen wollen
  • Eine praktische Anleitung zu ES6-Modulen
  • Lernen Sie diese zentralen Webkonzepte kennen
  • Verbessern 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 Sie können mir auf Twitter folgen, wo ich relevante Tipps und Tricks zur Webentwicklung sowie persönliche Geschichten veröffentliche.

PS Wenn Ihnen dieser Artikel gefallen hat und Sie mehr davon möchten, klatschen Sie bitte share und teilen Sie ihn mit Freunden, die ihn möglicherweise benötigen. Es ist gutes Karma.