Wie wir bereits in der vorherigen Lektion gelernt haben,
ermöglicht es uns HTTP-Protokoll, zwischen einem Client und einem Server zu kommunizieren.
Wir haben einige Details über das HTTP-Protokoll bereits in der vorherigen Lektion gesehen.
In dieser Lektion werden wir Angular-Unterstützung für HTTP untersuchen.
Angular unterstützt HTTP über den Angular HTTP Client.
Wir werden uns ansehen, wie wir
den Angular HTTP-Client für die Client-Server-Kommunikation
in unserer Angular-Anwendung nutzen können.
Die beiden Übungen, die dieser Vorlesung folgen,
werden wir die praktische Verwendung
des Angular HTTP-Clients innerhalb unserer Angular Anwendung untersuchen.
Schauen wir uns ein wenig über die Details des HTTP-Clients in dieser Vorlesung an.
Wie wir erwarten würden,
nutzt Angular das HTTP-Protokoll, um die Kommunikation zwischen
unserem Angular-Client und dem HTTP-basierten Server zu ermöglichen.
Die meisten modernen Browser, die in
der Regel verwendet werden, um XMLHttpRequest oder die XHR-Art der Kommunikation mit dem Server zu unterstützen.
Zunehmend übernehmen die Browser die Fetch-API,
die ein moderner Ersatz für XMLHttpRequest ist,
um die Kommunikation zwischen dem Browser und dem Server bereitzustellen.
Angular nutzt dies für die Kommunikation mit dem Server über den HTTP-Client.
Wir werden uns die Verwendung des HTTP-Clients ansehen und wie wir HttpClientModule
innerhalb unserer Angular Anwendung verwenden können, um Client-Server-Kommunikation zu ermöglichen.
Jede Kommunikation zwischen dem Client und dem Server, wie wir erwarten,
wird asynchron sein.
Das bedeutet, dass Ihr Client
warten muss, bis die Daten vom Serverstandort zugestellt werden.
Folglich muss Ihr Client
so konfiguriert werden, dass er mit dieser Verzögerung beim Abrufen der Daten umgehen kann.
Im vorherigen Modul selbst
hatten wir unsere Client-Anwendungen bereits so konfiguriert, dass sie
den Fortschrittsspinner auf der Benutzeroberfläche anzeigen können,
um den Benutzer darüber auf dem Laufenden zu halten, dass es eine Verzögerung beim Abrufen der Daten gibt,
bevor die Ansicht gerendert wird.
Das kommt uns in dieser Lektion zu Hilfe,
wo wir offensichtlich mit der Verzögerung umgehen müssen, um Daten von der Server-Site zu erhalten.
Der Datenzugriff innerhalb unserer Angular-Anwendung
ist es immer besser, diese Verantwortung an den Dienst zu delegieren.
Also lassen wir den Dienst mit der Interaktion mit dem Server umgehen,
und dann erhält Ihre Komponente die Daten, indem sie die Methoden des Dienstes aufruft.
Die Komponenten-Service-Interaktion haben wir bereits im vorherigen Modul eingerichtet.
Alles, was wir tun müssen,
ist, unsere Dienste zu aktualisieren, um das HTTP-Modul zu nutzen, um mit dem Server
zu kommunizieren, die Daten vom Server zu erhalten und dann
die Daten an die Komponente zu liefern.
Der HTTP-Server selbst,
wird die Daten an unseren Client zurückgeben und
unser HTTP-Modul gibt die Daten an unseren Dienst in der nachbeobachtbaren Nachverfolgung zurück.
Dieses beobachtbare, wird dann verarbeitet und
dann als beobachtbare an unsere Komponente zurückgegeben.
Diesen Teil haben wir bereits im vorherigen Modul eingerichtet.
Daher werden wir das nutzen, um es uns zu ermöglichen,
die HTTP-Kommunikation zwischen dem Client und dem Server,
zwischen dem Dienst und der Server-Site schnell zu rutschen,
und dann
kann der Rest der Infrastruktur, die bereits in unserer Angular-Anwendung vorhanden ist, leicht mit der Bereitstellung umgehen des beobachtbaren für unsere Komponente
und der Komponente, die diesen Beobachter bereits abonniert.
Der zusätzliche Effekt, mit dem wir umgehen werden,
ist, wie mit Fehlern umzugehen ist.
Wir werden darüber in den späteren Folien ein wenig detaillierter sprechen.
Wie ich bereits erwähnt habe, gibt
der HTTP-Client ein beobachtbares zurück.
Wenn Sie also das HTTP-Modul aufrufen,
werden Sie Ihren Dienst so einrichten, dass er das HTTP-Modul verwendet,
und mit dem HTTP-Modul
bietet es Ihnen mehrere Methoden, die mit den
Verben get, put, post und delete des HTTP-Protokolls übereinstimmen.
Daher werden die
Methoden get, put, post und delete automatisch vom HTTP-Modul unterstützt.
Daher werden Sie diese Methoden nutzen, um
diese speziellen Vorgänge auf der Server-Site ausführen zu können.
Wenn Sie also einen HTTP-Get-Aufruf ausgeben,
fordern Sie an, dass Daten vom Server an den Client übermittelt werden.
Der HTTP-Client wiederum
verarbeitet das Observable, das über das Angular HTTP-Modul geliefert wird,
und liefert dann das beobachtbare an unsere Komponente.
Innerhalb unserer Komponente haben wir bereits
das Observable abonniert, das von unserem Service geliefert wird,
und so ist der Umgang mit den Daten, die über das Beobachtbare gesendet werden,
für uns ziemlich einfach.
Wenn die Angular-Anwendung
mit einem Server kommuniziert, der die Antwort im JSON-Format zurückgibt,
analysiert die Angular HTTP-Clients get-Methode selbst die JSON-Antwort des Servers in ein anonymes Objekt.
Der Client selbst weiß nicht genau, wie er die Form dieses Objekts interpretieren soll.
So können wir dem HTTP-Client helfen, indem wir die Form des Objekts
angeben, indem wir eine Deklaration einer JavaScript-Klasse
angeben, die die Form des Objekts angibt, so dass
die Ausgabe vom get leicht von der Anwendung verbraucht werden kann.
Also, in der Übung,
werden Sie sehen, wie ich es deklariere.
Zum Beispiel werden wir diese.http.get sagen,
und dann in eckigen Klammern
gebe ich Gericht dort an.
Auf diese Weise
werden die eingehenden Daten für die Get-Anfrage von der Server-Site in
ein Dish-Objekt konvertiert und können dann sofort
von meiner Komponente verbraucht werden, wenn sie den Inhalt auslegt.
Wenn Sie dies wünschen,
können Sie nun Zugriff auf die vollständige Antwort erhalten, die von der Server-Site eingeht.
Aber das wäre nur unter bestimmten Umständen,
wo Sie zum Beispiel Zugriff auf
die Header der eingehenden HTTP-Antwortnachricht benötigen und so weiter.
Aber für die meisten Zwecke
können wir einfach durch Deklarieren der Form des Objekts die JSON-Daten automatisch auf eine Weise analysieren
, die von unserer Angular-Anwendung leichter verbraucht werden kann.
Wie wir erwarten, wird
die Kommunikation zwischen dem Client und dem Server nicht fehlerfrei sein.
Fehler werden aus vielen verschiedenen Gründen auftreten.
Es kann sein, dass die Verbindung zwischen dem Client und dem Server nicht hergestellt wird,
es kann die Tatsache sein, dass die Antwort vom Server verloren geht,
es kann die Tatsache sein, dass der Server die Daten nicht finden kann, die Sie suchen,
und gibt so eine 404 zurück, die angibt, dass der Server nicht in der Lage, die Daten für Sie bereitzustellen oder fehlende Daten auf der Server-Site usw.
Also, Ihr Kunde muss mit all diesen Fehlern umgehen.
Im Rahmen unseres Dienstes werden
wir unseren Dienst so konfigurieren, dass er diesen Fehler abfangen kann.
Dies ist also, wo die Verwendung der catch-Methode, die von der HTTP unterstützt wird,
ermöglicht es uns, den Fehler zu fangen, diesen Fehler zu verarbeiten
und dann die Fehlermeldung an unsere Komponente zu senden
und dann die Komponente mit der Fehlermeldung in
irgendeiner Weise umzugehen, die es angemessen schien.
Jetzt
werden wir beispielsweise innerhalb unserer Komponente die Fehlerinformationen anzeigen, die wir
aus unserer Sicht erhalten haben, um dem Benutzer anzuzeigen,
dass ein Fehler beim Abrufen der Daten von der Server-Site aufgetreten ist.
Also, innerhalb des Dienstes,
müssen wir diesen Fehler verarbeiten.
Nun, wenn diese Fehlerinformationen von
der Server-Site über den HTTP-Client erhalten innerhalb unseres Dienstes verarbeitet werden,
dann werden wir diese in eine Zeichenfolge konvertieren,
und diese Zeichenfolge wird mit der beobachtbaren Wurfmethode an unsere Komponente übergeben werden.
Also, die Wurfmethode ermöglicht es uns, einen Fehler zu werfen.
Dann, weil wir in unserer Komponente
diese beobachtbare innerhalb der Abonnementmethode abonnieren,
müssen Sie mit dem Fehler umgehen.
Also, im Subscrib-Teil
haben wir früher nur eine Funktion gesehen, die für das Abonnieren angegeben wird,
und das befasst sich mit der normalen Operation.
Aber zusammen damit
können wir auch eine zweite Funktion zur Verfügung stellen, an die der Fehler geliefert wird.
Sie werden also sehen, wie ich den Subscrib-Teil meiner Komponente
mit einer zweiten Funktion konfiguriere, die innerhalb der Subscribe-Methode dort angegeben ist,
wie ein Beispiel, das hier in diesem Code veranschaulicht wird.
Auf diese Weise wird der Fehler in
meiner Komponente abgefangen und dann entsprechende Fehlermeldung,
Informationen werden an den Benutzer innerhalb der Ansicht übermittelt.
Wir werden das also als Teil der zweiten Übung in dieser speziellen Lektion sehen.
Mit diesem schnellen Verständnis des HTTP-Clients
werden wir nun zu den Übungen übergehen, in denen wir den
Angular HTTP-Client verwenden, der über das HTTP-Modul der Angular HTTP-Bibliothek bereitgestellt wird,
um uns die Kommunikation mit unserem Server zu ermöglichen.