1 00:00:03,630 --> 00:00:08,225 Wie wir bereits in der vorherigen Lektion gelernt haben, 2 00:00:08,225 --> 00:00:15,020 ermöglicht es uns HTTP-Protokoll, zwischen einem Client und einem Server zu kommunizieren. 3 00:00:15,020 --> 00:00:19,770 Wir haben einige Details über das HTTP-Protokoll bereits in der vorherigen Lektion gesehen. 4 00:00:19,770 --> 00:00:25,440 In dieser Lektion werden wir Angular-Unterstützung für HTTP untersuchen. 5 00:00:25,440 --> 00:00:29,810 Angular unterstützt HTTP über den Angular HTTP Client. 6 00:00:29,810 --> 00:00:32,700 Wir werden uns ansehen, wie wir 7 00:00:32,700 --> 00:00:36,725 den Angular HTTP-Client für die Client-Server-Kommunikation 8 00:00:36,725 --> 00:00:38,925 in unserer Angular-Anwendung nutzen können. 9 00:00:38,925 --> 00:00:42,045 Die beiden Übungen, die dieser Vorlesung folgen, 10 00:00:42,045 --> 00:00:45,650 werden wir die praktische Verwendung 11 00:00:45,650 --> 00:00:49,660 des Angular HTTP-Clients innerhalb unserer Angular Anwendung untersuchen. 12 00:00:49,660 --> 00:00:56,020 Schauen wir uns ein wenig über die Details des HTTP-Clients in dieser Vorlesung an. 13 00:00:56,020 --> 00:00:58,415 Wie wir erwarten würden, 14 00:00:58,415 --> 00:01:02,975 nutzt Angular das HTTP-Protokoll, um die Kommunikation zwischen 15 00:01:02,975 --> 00:01:08,000 unserem Angular-Client und dem HTTP-basierten Server zu ermöglichen. 16 00:01:08,000 --> 00:01:11,820 Die meisten modernen Browser, die in 17 00:01:11,820 --> 00:01:17,820 der Regel verwendet werden, um XMLHttpRequest oder die XHR-Art der Kommunikation mit dem Server zu unterstützen. 18 00:01:17,820 --> 00:01:22,519 Zunehmend übernehmen die Browser die Fetch-API, 19 00:01:22,519 --> 00:01:26,900 die ein moderner Ersatz für XMLHttpRequest ist, 20 00:01:26,900 --> 00:01:32,225 um die Kommunikation zwischen dem Browser und dem Server bereitzustellen. 21 00:01:32,225 --> 00:01:39,960 Angular nutzt dies für die Kommunikation mit dem Server über den HTTP-Client. 22 00:01:39,960 --> 00:01:48,450 Wir werden uns die Verwendung des HTTP-Clients ansehen und wie wir HttpClientModule 23 00:01:48,450 --> 00:01:52,425 innerhalb unserer Angular Anwendung verwenden können, um Client-Server-Kommunikation zu ermöglichen. 24 00:01:52,425 --> 00:01:56,150 Jede Kommunikation zwischen dem Client und dem Server, wie wir erwarten, 25 00:01:56,150 --> 00:01:57,770 wird asynchron sein. 26 00:01:57,770 --> 00:02:00,410 Das bedeutet, dass Ihr Client 27 00:02:00,410 --> 00:02:03,470 warten muss, bis die Daten vom Serverstandort zugestellt werden. 28 00:02:03,470 --> 00:02:06,620 Folglich muss Ihr Client 29 00:02:06,620 --> 00:02:12,420 so konfiguriert werden, dass er mit dieser Verzögerung beim Abrufen der Daten umgehen kann. 30 00:02:12,420 --> 00:02:16,295 Im vorherigen Modul selbst 31 00:02:16,295 --> 00:02:19,910 hatten wir unsere Client-Anwendungen bereits so konfiguriert, dass sie 32 00:02:19,910 --> 00:02:24,160 den Fortschrittsspinner auf der Benutzeroberfläche anzeigen können, 33 00:02:24,160 --> 00:02:28,795 um den Benutzer darüber auf dem Laufenden zu halten, dass es eine Verzögerung beim Abrufen der Daten gibt, 34 00:02:28,795 --> 00:02:31,985 bevor die Ansicht gerendert wird. 35 00:02:31,985 --> 00:02:35,210 Das kommt uns in dieser Lektion zu Hilfe, 36 00:02:35,210 --> 00:02:42,880 wo wir offensichtlich mit der Verzögerung umgehen müssen, um Daten von der Server-Site zu erhalten. 37 00:02:42,880 --> 00:02:47,000 Der Datenzugriff innerhalb unserer Angular-Anwendung 38 00:02:47,000 --> 00:02:52,150 ist es immer besser, diese Verantwortung an den Dienst zu delegieren. 39 00:02:52,150 --> 00:02:56,450 Also lassen wir den Dienst mit der Interaktion mit dem Server umgehen, 40 00:02:56,450 --> 00:03:02,795 und dann erhält Ihre Komponente die Daten, indem sie die Methoden des Dienstes aufruft. 41 00:03:02,795 --> 00:03:08,405 Die Komponenten-Service-Interaktion haben wir bereits im vorherigen Modul eingerichtet. 42 00:03:08,405 --> 00:03:09,970 Alles, was wir tun müssen, 43 00:03:09,970 --> 00:03:16,700 ist, unsere Dienste zu aktualisieren, um das HTTP-Modul zu nutzen, um mit dem Server 44 00:03:16,700 --> 00:03:20,060 zu kommunizieren, die Daten vom Server zu erhalten und dann 45 00:03:20,060 --> 00:03:22,635 die Daten an die Komponente zu liefern. 46 00:03:22,635 --> 00:03:26,645 Der HTTP-Server selbst, 47 00:03:26,645 --> 00:03:30,980 wird die Daten an unseren Client zurückgeben und 48 00:03:30,980 --> 00:03:37,245 unser HTTP-Modul gibt die Daten an unseren Dienst in der nachbeobachtbaren Nachverfolgung zurück. 49 00:03:37,245 --> 00:03:40,010 Dieses beobachtbare, wird dann verarbeitet und 50 00:03:40,010 --> 00:03:43,030 dann als beobachtbare an unsere Komponente zurückgegeben. 51 00:03:43,030 --> 00:03:46,760 Diesen Teil haben wir bereits im vorherigen Modul eingerichtet. 52 00:03:46,760 --> 00:03:51,380 Daher werden wir das nutzen, um es uns zu ermöglichen, 53 00:03:51,380 --> 00:03:56,315 die HTTP-Kommunikation zwischen dem Client und dem Server, 54 00:03:56,315 --> 00:04:00,145 zwischen dem Dienst und der Server-Site schnell zu rutschen, 55 00:04:00,145 --> 00:04:05,900 und dann 56 00:04:05,900 --> 00:04:12,010 kann der Rest der Infrastruktur, die bereits in unserer Angular-Anwendung vorhanden ist, leicht mit der Bereitstellung umgehen des beobachtbaren für unsere Komponente 57 00:04:12,010 --> 00:04:15,130 und der Komponente, die diesen Beobachter bereits abonniert. 58 00:04:15,130 --> 00:04:18,200 Der zusätzliche Effekt, mit dem wir umgehen werden, 59 00:04:18,200 --> 00:04:21,040 ist, wie mit Fehlern umzugehen ist. 60 00:04:21,040 --> 00:04:25,340 Wir werden darüber in den späteren Folien ein wenig detaillierter sprechen. 61 00:04:25,340 --> 00:04:27,625 Wie ich bereits erwähnt habe, gibt 62 00:04:27,625 --> 00:04:30,850 der HTTP-Client ein beobachtbares zurück. 63 00:04:30,850 --> 00:04:33,845 Wenn Sie also das HTTP-Modul aufrufen, 64 00:04:33,845 --> 00:04:38,040 werden Sie Ihren Dienst so einrichten, dass er das HTTP-Modul verwendet, 65 00:04:38,040 --> 00:04:40,295 und mit dem HTTP-Modul 66 00:04:40,295 --> 00:04:46,290 bietet es Ihnen mehrere Methoden, die mit den 67 00:04:46,290 --> 00:04:49,800 Verben get, put, post und delete des HTTP-Protokolls übereinstimmen. 68 00:04:49,800 --> 00:04:50,870 Daher werden die 69 00:04:50,870 --> 00:04:54,960 Methoden get, put, post und delete automatisch vom HTTP-Modul unterstützt. 70 00:04:54,960 --> 00:04:59,165 Daher werden Sie diese Methoden nutzen, um 71 00:04:59,165 --> 00:05:03,330 diese speziellen Vorgänge auf der Server-Site ausführen zu können. 72 00:05:03,330 --> 00:05:06,365 Wenn Sie also einen HTTP-Get-Aufruf ausgeben, 73 00:05:06,365 --> 00:05:11,000 fordern Sie an, dass Daten vom Server an den Client übermittelt werden. 74 00:05:11,000 --> 00:05:13,195 Der HTTP-Client wiederum 75 00:05:13,195 --> 00:05:18,170 verarbeitet das Observable, das über das Angular HTTP-Modul geliefert wird, 76 00:05:18,170 --> 00:05:22,470 und liefert dann das beobachtbare an unsere Komponente. 77 00:05:22,470 --> 00:05:25,550 Innerhalb unserer Komponente haben wir bereits 78 00:05:25,550 --> 00:05:28,340 das Observable abonniert, das von unserem Service geliefert wird, 79 00:05:28,340 --> 00:05:32,580 und so ist der Umgang mit den Daten, die über das Beobachtbare gesendet werden, 80 00:05:32,580 --> 00:05:35,500 für uns ziemlich einfach. 81 00:05:35,500 --> 00:05:38,900 Wenn die Angular-Anwendung 82 00:05:38,900 --> 00:05:47,280 mit einem Server kommuniziert, der die Antwort im JSON-Format zurückgibt, 83 00:05:47,280 --> 00:05:51,750 analysiert die Angular HTTP-Clients get-Methode selbst die JSON-Antwort des Servers in ein anonymes Objekt. 84 00:05:51,750 --> 00:05:58,070 Der Client selbst weiß nicht genau, wie er die Form dieses Objekts interpretieren soll. 85 00:05:58,070 --> 00:06:04,220 So können wir dem HTTP-Client helfen, indem wir die Form des Objekts 86 00:06:04,220 --> 00:06:10,170 angeben, indem wir eine Deklaration einer JavaScript-Klasse 87 00:06:10,170 --> 00:06:13,520 angeben, die die Form des Objekts angibt, so dass 88 00:06:13,520 --> 00:06:17,025 die Ausgabe vom get leicht von der Anwendung verbraucht werden kann. 89 00:06:17,025 --> 00:06:19,330 Also, in der Übung, 90 00:06:19,330 --> 00:06:20,500 werden Sie sehen, wie ich es deklariere. 91 00:06:20,500 --> 00:06:23,560 Zum Beispiel werden wir diese.http.get sagen, 92 00:06:23,560 --> 00:06:27,695 und dann in eckigen Klammern 93 00:06:27,695 --> 00:06:29,940 gebe ich Gericht dort an. 94 00:06:29,940 --> 00:06:31,555 Auf diese Weise 95 00:06:31,555 --> 00:06:37,400 werden die eingehenden Daten für die Get-Anfrage von der Server-Site in 96 00:06:37,400 --> 00:06:41,660 ein Dish-Objekt konvertiert und können dann sofort 97 00:06:41,660 --> 00:06:47,185 von meiner Komponente verbraucht werden, wenn sie den Inhalt auslegt. 98 00:06:47,185 --> 00:06:48,990 Wenn Sie dies wünschen, 99 00:06:48,990 --> 00:06:54,315 können Sie nun Zugriff auf die vollständige Antwort erhalten, die von der Server-Site eingeht. 100 00:06:54,315 --> 00:06:57,810 Aber das wäre nur unter bestimmten Umständen, 101 00:06:57,810 --> 00:07:00,320 wo Sie zum Beispiel Zugriff auf 102 00:07:00,320 --> 00:07:05,820 die Header der eingehenden HTTP-Antwortnachricht benötigen und so weiter. 103 00:07:05,820 --> 00:07:11,380 Aber für die meisten Zwecke 104 00:07:11,380 --> 00:07:16,100 können wir einfach durch Deklarieren der Form des Objekts die JSON-Daten automatisch auf eine Weise analysieren 105 00:07:16,100 --> 00:07:21,410 , die von unserer Angular-Anwendung leichter verbraucht werden kann. 106 00:07:21,410 --> 00:07:24,140 Wie wir erwarten, wird 107 00:07:24,140 --> 00:07:27,845 die Kommunikation zwischen dem Client und dem Server nicht fehlerfrei sein. 108 00:07:27,845 --> 00:07:36,740 Fehler werden aus vielen verschiedenen Gründen auftreten. 109 00:07:36,740 --> 00:07:40,130 Es kann sein, dass die Verbindung zwischen dem Client und dem Server nicht hergestellt wird, 110 00:07:40,130 --> 00:07:47,660 es kann die Tatsache sein, dass die Antwort vom Server verloren geht, 111 00:07:47,660 --> 00:07:54,005 es kann die Tatsache sein, dass der Server die Daten nicht finden kann, die Sie suchen, 112 00:07:54,005 --> 00:08:00,515 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. 113 00:08:00,515 --> 00:08:04,070 Also, Ihr Kunde muss mit all diesen Fehlern umgehen. 114 00:08:04,070 --> 00:08:05,745 Im Rahmen unseres Dienstes werden 115 00:08:05,745 --> 00:08:09,200 wir unseren Dienst so konfigurieren, dass er diesen Fehler abfangen kann. 116 00:08:09,200 --> 00:08:13,935 Dies ist also, wo die Verwendung der catch-Methode, die von der HTTP unterstützt wird, 117 00:08:13,935 --> 00:08:17,870 ermöglicht es uns, den Fehler zu fangen, diesen Fehler zu verarbeiten 118 00:08:17,870 --> 00:08:21,745 und dann die Fehlermeldung an unsere Komponente zu senden 119 00:08:21,745 --> 00:08:24,920 und dann die Komponente mit der Fehlermeldung in 120 00:08:24,920 --> 00:08:28,340 irgendeiner Weise umzugehen, die es angemessen schien. 121 00:08:28,340 --> 00:08:30,485 Jetzt 122 00:08:30,485 --> 00:08:33,530 werden wir beispielsweise innerhalb unserer Komponente die Fehlerinformationen anzeigen, die wir 123 00:08:33,530 --> 00:08:36,980 aus unserer Sicht erhalten haben, um dem Benutzer anzuzeigen, 124 00:08:36,980 --> 00:08:40,755 dass ein Fehler beim Abrufen der Daten von der Server-Site aufgetreten ist. 125 00:08:40,755 --> 00:08:43,210 Also, innerhalb des Dienstes, 126 00:08:43,210 --> 00:08:45,015 müssen wir diesen Fehler verarbeiten. 127 00:08:45,015 --> 00:08:48,710 Nun, wenn diese Fehlerinformationen von 128 00:08:48,710 --> 00:08:52,615 der Server-Site über den HTTP-Client erhalten innerhalb unseres Dienstes verarbeitet werden, 129 00:08:52,615 --> 00:08:54,815 dann werden wir diese in eine Zeichenfolge konvertieren, 130 00:08:54,815 --> 00:08:59,905 und diese Zeichenfolge wird mit der beobachtbaren Wurfmethode an unsere Komponente übergeben werden. 131 00:08:59,905 --> 00:09:02,785 Also, die Wurfmethode ermöglicht es uns, einen Fehler zu werfen. 132 00:09:02,785 --> 00:09:05,770 Dann, weil wir in unserer Komponente 133 00:09:05,770 --> 00:09:08,770 diese beobachtbare innerhalb der Abonnementmethode abonnieren, 134 00:09:08,770 --> 00:09:10,520 müssen Sie mit dem Fehler umgehen. 135 00:09:10,520 --> 00:09:12,505 Also, im Subscrib-Teil 136 00:09:12,505 --> 00:09:17,120 haben wir früher nur eine Funktion gesehen, die für das Abonnieren angegeben wird, 137 00:09:17,120 --> 00:09:19,820 und das befasst sich mit der normalen Operation. 138 00:09:19,820 --> 00:09:21,490 Aber zusammen damit 139 00:09:21,490 --> 00:09:27,270 können wir auch eine zweite Funktion zur Verfügung stellen, an die der Fehler geliefert wird. 140 00:09:27,270 --> 00:09:32,450 Sie werden also sehen, wie ich den Subscrib-Teil meiner Komponente 141 00:09:32,450 --> 00:09:38,480 mit einer zweiten Funktion konfiguriere, die innerhalb der Subscribe-Methode dort angegeben ist, 142 00:09:38,480 --> 00:09:44,475 wie ein Beispiel, das hier in diesem Code veranschaulicht wird. 143 00:09:44,475 --> 00:09:47,780 Auf diese Weise wird der Fehler in 144 00:09:47,780 --> 00:09:50,890 meiner Komponente abgefangen und dann entsprechende Fehlermeldung, 145 00:09:50,890 --> 00:09:54,380 Informationen werden an den Benutzer innerhalb der Ansicht übermittelt. 146 00:09:54,380 --> 00:10:00,825 Wir werden das also als Teil der zweiten Übung in dieser speziellen Lektion sehen. 147 00:10:00,825 --> 00:10:07,010 Mit diesem schnellen Verständnis des HTTP-Clients 148 00:10:07,010 --> 00:10:11,335 werden wir nun zu den Übungen übergehen, in denen wir den 149 00:10:11,335 --> 00:10:17,795 Angular HTTP-Client verwenden, der über das HTTP-Modul der Angular HTTP-Bibliothek bereitgestellt wird, 150 00:10:17,795 --> 00:10:22,740 um uns die Kommunikation mit unserem Server zu ermöglichen.