[MUSIC] Die
Kommunikation zwischen Client und Server ist nie ein Deal.
Um ein berühmtes Sprichwort zu paraphrasieren,
gibt es viele Köcher zwischen dem Client und dem Server.
Wie gehen wir also mit Fehlern um, wenn sie auftreten,
wenn wir zwischen dem Client und dem Server kommunizieren?
Lassen Sie uns darüber in dieser Übung sprechen.
Wenn der Server eine Antwort generiert oder der HTTP-Client
während der Kommunikation mit dem Server auf einen Fehler stößt und dann
eine Fehlerantwort generiert, wird diese in Form einer HTTP-Fehlerantwort geliefert.
Nun, diese Antwort, wollen wir in der Lage sein, sie zu verarbeiten und
dann in eine Antwortnachrichtenzeichenfolge
zu verwandeln, die an den Client geliefert werden kann, so dass der Client dies auf dem Bildschirm anzeigen kann.
Um uns zu ermöglichen, dies zu tun,
werden wir einen neuen Dienst namens Prozess HTTP-Nachricht in diesem erstellen, dies ist Ordner. Geben
Sie dazu an der Eingabeaufforderung ng,
g service services/processhttpmsg ein
und generieren Sie den ProcessHttpMsg Dienst.
Sobald der Dienst generiert wurde, werden wir dann weitermachen und
ihn in das App-Modul hinzufügen.
Und dann fügen wir eine Methode zum ProcessHttpMsg Dienst hinzu.
Nachdem wir nun den ProcessHttpMsg Dienst erstellt haben,
gehen wir weiter und fügen Sie das dann in die app.module.ts Datei.
Gehen Sie also zur Datei app.module.ts,
lassen Sie mich den ProcessHttpMsg Dienst importieren,
Von '. /services/process-httpmsg.service '.
Sobald das importiert wurde, werden wir in der Lage sein, das in unserer Anwendung zu verwenden.
Gehen wir also weiter und fügen Sie das unseren Anbietern hinzu. Wenn ich
also in unsere Provider gehe,
lasse ich den ProcessHttpMsgService zu den Anbietern hinzufügen.
Das erste, was wir tun werden, ist eine neue Methode in
den ProcessHttpMsgService namens Handle-Fehler aufzunehmen,
die sich um die Behandlung von Fehlern kümmern, wenn sie auftreten.
Und dann werden wir sie in den Diensten nutzen, in denen wir auf den Server zugreifen.
Um zu beginnen, lassen Sie uns zuerst importieren,
ThrowError von, rxjs,
und das hilft uns, Fehler zu werfen, wann immer das auftritt.
Und dann importieren wir HttpErrorResponse von,
eckigular/common/http.
Dann werden wir beginnen HandleError-Methode zu entwerfen
, und dies nimmt als Parameter einen Fehler, der eine Antwort sein könnte,
die eine Fehlerantwort vom Server ist,
oder einen anderen Grund, dass der Fehler auftritt.
Also, was sollen wir innerhalb dieser HandleError-Methode tun?
Lassen Sie uns versuchen, eine Nachricht zu konstruieren, die zusammenfasst, worum es bei dem Fehler geht.
Also werden wir hier eine neue String-Variable einschließen.
Wenn error.error eine Instanz
von ErrorEvent ist. Wenn dies also ein Fehlerereignis ist, das
auftritt, enthält die error.error.message Informationen.
Also setzen wir die Fehlermeldung auf
error.error.message.
Wenn das nicht der Fall ist, dann bedeutet das, dass dies von der Serverseite kommt,
und in diesem Fall wird die Fehlermeldung erstellt, indem man gleich backquotes sagt,
notiert die Backquotes hier und dann $ {error.status}.
Also extrahieren wir die Statusinformationen von dort.
Und dann, - Error.statusText,
wenn der StatusText existiert, oder
das wird eine leere Zeichenfolge sein.
Und dann werden wir auch den error.error selbst,
das vollständige Fehlerobjekt selbst, direkt dort in die Zeichenfolge einschließen.
Und dann verwenden Sie das als unsere Fehlermeldung.
Jetzt, sobald wir die Fehlermeldung haben,
können wir den ThrowError verwenden, um
einen Fehler zurückzugeben, der für unsere Anwendung beobachtet werden kann.
Was das bedeutet, ist, dass dies zu diesem Zeitpunkt einen Fehler auslöst,
wobei die Fehlermeldung dort enthalten ist.
Diese Fehlermeldung wird also basierend auf den Informationen erstellt,
die wir hier erhalten, entweder weil die Serverseite mit einem Fehler geantwortet hat oder
der Fehler aus anderen Gründen stammen könnte.
In beiden Fällen werden wir also eine Fehlermeldung erstellen und sie dann zurückgeben.
Nun, wo verwenden wir diesen Handle-Fehler?
Nun, innerhalb unserer Dienste, zum Beispiel in der Datei dishservice.ts,
sahen wir, dass früher, als wir gesagt haben, dieses HTTP bekommen, und dann haben wir gerade Karte gesagt,
und dann angenommen, dass die Antwort immer eine positive Antwort ist.
Aber nehmen wir an, ihre Antwort ist nicht positiv, und
dann gibt es einen Fehler zurück, dann müssen wir diesen Fehler abfangen.
Um uns dabei zu helfen, importieren wir den CatchError-Operator von rxjs,
und dann importieren wir auch den ProcessHttpMsgService
, den wir zuvor erstellt haben, in
unseren Dish Service, damit wir die Handle Error Methode von dort verwenden können.
Also importieren wir dies aus der. /process-httpmsg.service.
Und dann, wenn wir zum Konstruktor gehen,
injizieren wir jetzt den Prozess HTTP-Nachrichtendienst
zusammen mit dem HTTP-Client in den Konstruktor.
Damit wir diesen Service nutzen können,
insbesondere die Handle-Fehler-Methode des Dienstes, um die Fehler zu behandeln
, die von unserem HTTP-Client dort zurückgegeben werden.
Jetzt, sobald wir den Konstruktor konfiguriert haben,
dann um Fehler in der GetDishs-Methode zum
Beispiel zu behandeln, werden wir an catchErrors Methode pipe.
Rufen Sie dann die HandleError-Methode nach
this.ProcesshttpMsgService innerhalb der catchError-Methode auf.
Auf diese Weise Wenn der HTTP-Client einen Fehler zurückgibt, wird dieser verarbeitet und
die entsprechende Fehlermeldung extrahiert.
Und dann wird der Fehler an diesem
Punkt durch die HandleError-Methode ausgelöst.
Ebenso lassen Sie uns dasselbe mit den
Methoden GetDish und GetFeatureDish auch tun.
Nun, wenn es um die GetDish IDS-Methode geht,
da die GetDish IDS-Methode die getDish-Methode verwendet,.
Daher müssen wir den HandleError nicht explizit aufrufen, denn wenn ein Fehler auftritt, hat
die GetDishs-Methode diesen Fehler bereits in eine Fehlerzeichenfolge konvertiert.
Also müssen wir nur den Fehler abfangen und dann den Fehler von GetDish Ids zurückgeben.
Normalerweise würden wir nicht einmal auf diesen Punkt kommen, wenn ein Fehler auftritt, da
die GetDishs-Methode den Fehler zu diesem Zeitpunkt angemessen behandelt hätte.
Sobald wir also den Geschirrservice entsprechend konfiguriert haben,
können wir dann die
CatCError-Methode nutzen, um die auftretenden Fehler zu beheben.
Nun, da wir unseren Service aktualisiert haben, um mit Fehlern umgehen zu können.
Wie gehen wir damit innerhalb unserer Komponente selbst um?
Also innerhalb einer Komponente, so zum Beispiel, wenn wir auf die Menükomponente gehen.
Was wir erkennen, ist, dass, wenn wir das Abonnement machen,
wir erwarteten, dass die Gerichte an uns geliefert werden.
Nun ist es möglich, dass die Anweisung des Geschirrs,
der Fehler durch den beobachtbaren Wurf geliefert wird und
dann führt, dass die Fehlermeldung uns zur Verfügung steht.
Also, um mit dieser Situation umzugehen, werde ich eine neue
Variable namens ErRmess in der Menükomponente vorstellen, die vom Typ String ist.
Und dann bietet die Subscribe-Methode selbst eine Möglichkeit, Fehler zu behandeln.
Also die Subscribe-Methode, im Moment haben wir nur eine Funktion hier angegeben.
Wir können auch eine zweite Funktion angeben, die
aufgerufen wird, wenn der Fehler resultiert.
In diesem Fall kann ich also eine zweite Fehlerfunktion bereitstellen, die besagt,
ErrMess, was der Wert ist, der zurückgegeben wird,
wenn der beobachtbare Wurf vom DishService ausgeführt wird.
Also in diesem Fall würde ich sagen this.Errmess = Errmess, und das war's.
Was also passiert, ist, dass, wenn das Observable
vom DishService zurückgegeben wird, ein Wert ist
, dann würde dies vom ersten Teil behandelt werden.
Wenn das Observable mit dem beobachtbaren Wurf zurückgegeben
wird, wird diese Funktion ausgeführt.
Und in dieser Funktion nehmen wir die Fehlermeldung und
erfassen diese Fehlermeldung dann in diese ErrMeß-Zeichenfolge, die wir hier haben.
So haben wir jetzt die Fehlermeldung zur Verfügung, so dass
wir diese Fehlermeldung in der Ansicht dieser Menükomponente anzeigen können.
Wie zeigen wir das in der Menükomponentenansicht an?
Also gehen Sie zu Menü Komponenten Template-Datei, hier sehen wir, dass, wenn Gerichte nicht null ist,
dann werden wir das Menü mit allen Gerichten anzeigen.
Wenn Gerichte null ist, dann wird dieser Spinner dort angezeigt.
Jetzt werden wir hier noch einen hinzufügen,
auch wenn die ErrMess, die wir haben,
die Variable, nicht null ist, dann
sollte auch der Spinner versteckt werden und dann
schließlich ein weiteres div mit einem nGIF hinzufügen.
Also, was das tut, ist, dass dieser letzte Tauchgang angezeigt wird,
falls es einen Fehler gibt, und die Fehlermeldung. Die
ErrMeß-Zeichenfolge wird für die Fehlermeldung eingerichtet.
Also in diesem Fall werden wir einfach h2 Fehler sagen,
und dann werde ich nur diese Zeichenfolge anzeigen als,
Eine Zeichenfolge innerhalb der Ansicht dort, das ist es.
Sie können eine aufwändigere Art und Weise durchführen,
um die Fehlermeldung anzuzeigen, wenn Sie dies wünschen.
Aber alles, was ich tun werde, ist, wenn es einen Fehler gibt,
werde ich einfach Fehler auf dem Bildschirm anzeigen und dann eine ErRmess anzeigen.
Sie können es sogar stylen, indem Sie die Farbe
auf rot und so weiter ändern, aber ich werde es einfach so lassen.
Damit werden wir am Ende die Fehlermeldung in der Ansicht hier anzeigen.
Das gleiche Verfahren kann auch mit der Geschirrkomponente und
auch der Home-Komponente verwendet werden, wo wir auf den Geschirrservice zugreifen.
Also gehen Sie auf die Schüssel Komponente, werde genau das gleiche tun,
so in der Schüssel Komponente werde ich die, ErRmess hier einschließen.
Und dann genau hier innerhalb des Abonnements,
hier erhalten wir den Teller Wert.
Also der erste Teil,
was wir bereits aufgenommen haben, wird aufgerufen, wenn das beobachtbare einen Wert zurückgibt.
Aber sollte es keinen Wert zurückgeben, dann müssen wir uns mit der Fehlermeldung befassen.
Und wir werden genau die gleiche
Fehlermeldungsfunktion verwenden, die wir zuvor in der Menükomponente definiert haben.
Also, wir werden sagen, dass diese.Ermess
= Ermess hier.
Das war's, also ist meine Geschirrkomponente jetzt aktualisiert.
Also muss ich die Vorlagendatei der Geschirrkomponente aktualisieren. Wenn wir
also zur Vorlagendatei gehen,
sehen wir, dass wir das Gericht anzeigen werden, wenn das Gericht nicht null ist.
Und dann unten hier unten behandeln wir die
Situation, in der wir den Spinner zeigen, wenn das Gericht null ist.
Also lassen Sie mich auch hinzufügen, wenn die Fehlermeldung nicht null ist, dann
sollte ich eine Fehlermeldung anstatt das Gericht hier anzeigen, richtig?
Lassen Sie mich also fortfahren und
den Code aus der Menükomponente kopieren.
Ich werde
auch genau den gleichen Code für die Schüssel-Detailkomponenten-Vorlagendatei verwenden.
Also, genau da.
Lassen Sie mich voran und fügen Sie den Code hier ein.
Wir sehen also, dass, wenn ErrMess nicht null ist,
dieser Fehler in der Ansicht dort angezeigt wird.
Jetzt die gleiche Sache,
gehen wir zur Home-Komponente müssen wir durch das gleiche Verfahren gehen.
Jetzt innerhalb der Home-Komponente, natürlich, haben wir Gericht, Förderung und Führer.
Also werde ich separate, Strings für
jeden von ihnen definieren, weil der Fehler von einem der drei entstehen könnte.
Im Moment haben wir es nur mit Gericht zu tun, das von der Serverseite geholt wird.
Die restlichen zwei werde ich erwarten, dass Sie das als Teil der letzten Aufgabe tun.
Also werden wir, ich werde sagen Gericht errmess String und dann gehen in den Code hier.
Und im Code hier
werden wir einfach Errmess sagen.
Dieses Gericht errmess = jede
Errmess, das ist es.
Aktualisieren Sie auch die Vorlagendateien der Home-Komponenten.
Und auf die Home-Komponenten-Vorlagendatei gehen,
sehen wir, dass wir den Geschirrkorb dort angezeigt haben,
also sollte ich jetzt für diesen einen ErrMess sagen oder Gericht.
Und dann, unten hier unten, werde ich den Code einfügen
, den ich aus der Menükomponente kopiert habe, und
dann aktualisiere ich ihn, um ErRmess hier zu behandeln.
Und auch, aktualisieren Sie das hier zu Disherrmess, das war's.
Speichern wir die Änderungen. Wenn Sie
zum Browser gehen, sehen Sie, dass alles wie zuvor funktioniert.
Das Haus, die Menükomponente und auch die Schale Detailkomponente ohne Probleme.
Nun ist die Frage, wie verursachen wir Fehler?
Um Fehler zu verursachen, ist eine mögliche Möglichkeit, dass wir mit dem Problem umgehen können, dass wir gehen und
suchen eine nicht vorhandene Informationen vom Server.
Lassen Sie mich zum Geschirrservice gehen und dann
mein erstes Problem im DishService hier verursachen.
Also für das vorgestellte Gericht anstelle von Gerichten, lassen Sie mich einen Fehler machen und
zerkleinern und dann speichern Sie die Änderung.
Offensichtlich bedeutet das, dass diese URL nicht existiert.
Also, was passiert, wenn es auf den Server zugreift? Wenn Sie
zum Browser gehen, wenn wir jetzt scrollen,
sehen Sie, dass das Gericht hier nicht angezeigt wird.
Es sagt hier Fehler 404 nicht gefunden.
Dies liegt daran, dass wir versuchen, auf die Dishe-Informationen unter
der URL zuzugreifen, die auf der Serverseite nicht existiert.
So sehen Sie, wie die Fehlermeldung hier angezeigt wird.
Natürlich können Sie ein bisschen schicker sein und mehr arbeiten, um dies zu umgehen und
dann die Fehlermeldung sinnvoller anzuzeigen.
Aber das Grundprinzip wird hier hervorgehoben, dass Sie
eine Fehlermeldung anzeigen können, wenn etwas nicht richtig ausgeführt wird,
wenn Sie versuchen, auf Informationen von Ihrer Serverseite zuzugreifen.
Natürlich ist dies ein künstlich erstellter Fehler in meiner Anwendung.
Um eine weitere Art von Fehler zu verursachen, habe ich in mein Terminal-Fenster gegangen und
dann den Server heruntergefahren, um zu sehen, was meine Angular-Anwendung in diesem Fall tun wird.
Lassen Sie uns nach dem Herunterfahren des Servers sehen, was die Home-Komponente in ihrer Ansicht angezeigt wird. Wenn wir
also zur Home-Komponente gehen, sehen wir jetzt, dass meine
Angular-Anwendung nicht auf den Server zugreifen kann, sie erneut einen Fehler verursacht hat.
Und dann zeigt es diese Zeichenfolge dort an, um anzuzeigen, dass ein Fehler aufgetreten ist.
Natürlich ist dies eine kryptische Zeichenfolge, die
nichts Sinnvolles darüber vermittelt, was die Ursache des Fehlers ist.
Aber das ist alles, was wir versuchen könnten, auf den Server in dieser Anwendung zuzugreifen.
Gleiches gilt, wenn ich zum Menü gehe, sehen Sie die gleiche Art von Sache, die
angezeigt wird, weil der Server nicht verfügbar ist, und so können
die Gerichte Informationen nicht vom Server abgerufen werden.
Damit schließen wir diese Übung ab.
In dieser Übung haben wir gelernt, mit
Fehlern umzugehen, die während der Client-Server-Kommunikation in unserer Angular-Anwendung auftreten.
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit der Nachricht http Teil zwei zu machen.
( MUSIK)