Nach der kurzen Einführung in die Versprechungen in der vorherigen Vorlesung
gehen wir zu unserer nächsten Übung, in
der wir die Versprechen innerhalb unserer eckigen Anwendung nutzen werden.
Insbesondere sind Versprechen wesentliche Mittel, um mit den Verzögerungen umzugehen, insbesondere wenn
Sie auf die Daten von einem Server zugreifen und erhalten müssen,
bevor Sie über Ihren Service an die Komponente geliefert werden.
Daher geben Dienste oft Versprechen an
die Komponenten zurück, wenn die Komponenten die Dienstmethoden aufrufen,
und danach, wenn das Versprechen
aufgelöst wird, haben die Komponenten die Ergebnisse für sie verfügbar.
Wir werden die Dienste, die wir innerhalb
unserer Winkelanwendung haben, neu konfigurieren, um
Versprechen zurückzugeben, und dann werden wir
unsere Komponenten neu konfigurieren, um mit den Versprechen umgehen zu können.
Unser erster Schritt in dieser Übung besteht darin, alle Dienste neu zu konfigurieren, um Versprechen zurückzugeben.
Also jede der Methoden innerhalb unseres Dienstes, anstatt
den Wert sofort zurückzugeben, wird es Versprechen zurückgeben.
Also, wie konfigurieren wir unsere Dienste, um Versprechen zurückzugeben? Wenn Sie
also zur Datei dishservice.ts gehen,
wird die GetDishs-Methode hier anstelle des Dish-Arrays ein Versprechen zurückgeben.
Also konfigurieren wir die GetDishs-Methode, um
Versprechen zurückzugeben, indem wir dieses Gericht Objekt in ein Versprechen einschließen.
Was das bedeutet, ist, dass, wenn das Versprechen aufgelöst wird, das Ergebnis
des GetDishs-Versprechens ein Gericht Array sein würde.
Also, innerhalb Ihrer Komponente
erhalten Sie das Dish-Array, wenn das Versprechen korrekt ist.
Jetzt, da wir die GetDishes konfiguriert haben, um ein Versprechen zurückzugeben,
müssen wir den Code neu konfigurieren
, so dass dieses Geschirr Array als Teil eines Versprechens zurückgegeben wird.
Jetzt, da wir das Ergebnis bereits zur Verfügung haben,
werde ich die Shortcut-Methode verwenden, um das
Versprechen zurückzugeben, indem ich das Versprechen sofort auflöse.
Nun, offensichtlich funktioniert das gut, wenn Sie die Ergebnisse sofort bei Ihnen haben.
Aber wenn Sie Ihren Dienst neu konfigurieren, um
diese Daten von einem Server abrufen zu können,
müssen wir diesen Code neu schreiben, um damit umzugehen, dass
der Dienst das Ergebnis nicht
sofort zurückgibt, sondern Sie müssen einige Zeit warten.
In der nächsten Übung
werden wir die Verzögerung mithilfe einer JavaScript-Methode simulieren, damit Sie
ein Gefühl davon geben, was es bedeutet, mit Verzögerungen beim Empfangen eines Ergebnisses aus einem Versprechen umzugehen. Nachdem
wir nun die GetDishes konfiguriert haben, um das Versprechen zurückzugeben,
werden wir in ähnlicher Weise die verbleibenden beiden Methoden neu konfigurieren.
Also werde ich dieses Versprechen von
hier kopieren und dann einfach an die verbleibenden zwei dort anhängen,
damit ich sie auch umwandeln werde, um
Versprechen zurückzugeben, und dann
sollte natürlich, was wir hier haben, in die Verheißungslösung eingeschlossen werden.
Also werde ich nur die
Versprechenserklärung kopieren und dies in die Entschlossenheit einschließen.
In ähnlicher Weise werde ich für das vorgestellte Gericht dies in die Versprechensentscheidung einschließen.
Jetzt ist mein Geschirrservice so konfiguriert, dass er Versprechen zurückgibt.
Offensichtlich bedeutet dies auch, dass ich zu
meinen Komponenten gehen und dann die Komponenten neu konfigurieren muss, um
damit umzugehen, dass sie die Daten nicht
sofort erhalten, anstatt sie ein Versprechen erhalten und dann
die dann -Methode implementieren müssen
, in der Das Versprechen, wenn es Ergebnisse, wird die Daten an Sie liefern.
Also, jetzt, da wir den Geschirr-Service konfiguriert haben,
wissen wir einen Ort, an dem der Service aktiv genutzt wird und das ist Menükomponente.
Lassen Sie mich Ihnen zeigen, wie wir
die Komponente neu konfigurieren, um mit dem Versprechen umgehen zu können.
Also, wenn Sie auf die menucomponent.ts gehen Sie sofort
bemerken, dass es eine rote zerquetschige Linie unter Geschirr, weil,
wie Sie sehen, jetzt,
die dishservice.GetDishes wird ein Versprechen zurückgeben und dann hier haben Sie,
das Versprechen zu einem Gericht Array-Objekt zugeordnet und das ist nicht korrekt.
Wie konfigurieren wir diesen Code neu?
Also, wie ich bereits erwähnt habe,
müssen wir, wenn wir den Code neu konfigurieren, das Dann und den Fang für die GetDishes implementieren.
Lassen Sie mich also voran gehen und nur dann in diesem Moment
für die GetDishs-Methode implementieren, weil der Fang später implementiert werden kann. Im
Moment wissen wir, dass das Versprechen immer richtig aufgelöst
wird, also werden wir die dann Methode hier implementieren,
und dann, innerhalb der damaligen Methode,
werde ich das Geschirr Objekt erhalten, das hereinkommt, wenn sich das Versprechen auflöst.
Und wenn das Geschirr Objekt als Parameter kommt,
so dass Sie sehen, dass ich hier eine Pfeilfunktion schreibe,
werde ich das einfach ausschneiden und das direkt dort einschließen.
Da gehst du hin. Auf diese Weise kann Ihre Komponente nun
das Versprechen ergreifen und dann die Ergebnisse abrufen, wenn die Zusage gelöst wird.
Sie können sehen, dass wir den DishService GetDishes haben und dann die dann Methode
ändern und wobei, wenn das dann aufgerufen wird,
wenn das Versprechen von der anderen Seite aufgelöst
wird, dann werden die Gerichte an Sie geliefert, weil die GetDishs-Methode
ein Versprechen zurückgibt, aber das Ergebnis wird ein Gericht Array. Dieses
Gericht Array kommt hier als Parameter, also schreibe ich
hier eine Pfeilfunktion, wo ich das Geschirr Geschirr zuweise.
Also, wenn dieses Versprechen aufgelöst wird,
werden die Gerichte diesem Geschirr zugewiesen. Das war's.
Jetzt ist meine Menükomponente bereit, mit dem Versprechen fertig zu werden. Um
mit dem Fehler fertig zu werden, müssen Sie natürlich auch
die catch-Methode in die GetDishs-Methode verketten.
Also, das Dann und der Catch sind Methoden,
die das Versprechen für Sie bereitstellt, und so implementieren Sie das und innerhalb
derer Sie die Funktion bereitstellen, die sich mit
der Situation befasst, wenn das Versprechen aufgelöst wird oder wenn das Versprechen mit einem Fehler ablehnt.
In ähnlicher Weise sollten wir nun die Methode des Gerichtes
und auch die Home-Komponente neu konfigurieren, um mit der Tatsache umzugehen, dass
der DishService jetzt Versprechen liefert, anstatt die Werte sofort zu liefern.
Während wir dabei sind,
könnten wir ebenso gut sowohl den Führer als auch den Promotion-Dienst neu konfigurieren.
Also werde ich es als eine Übung für Sie überlassen, um
sowohl den Führungsdienst als auch den Promotionsdienst zu aktualisieren, um
die entsprechenden Versprechungen zu erfüllen.
Folglich müssen Sie auch
den Komponentententyp-Skriptcode in der Komponente „about“ in der Komponente „Dish Detail“
in der Home-Komponente neu konfigurieren, um mit der Tatsache umzugehen, dass Sie
jetzt Versprechen anstatt der tatsächlichen Ergebnisse erhalten.
Also werde ich Sie dieses Teil vervollständigen lassen, anstatt all das im Detail zu veranschaulichen.
Ich habe Ihnen einen Schritt mit der Komponente „Detail“ gezeigt.
Führen Sie die Schritte sowohl mit dem Leader als auch mit dem Promotion-Dienst aus,
und konfigurieren Sie dann die entsprechenden Komponenten entsprechend.
Lassen Sie mich Sie schnell durch die Updates führen, die Sie abschließen müssen.
So, wie Sie sehen, die Führungskräfte Dienst Ich habe bereits mit dem Versprechen aktualisiert.
Wie Sie hier sehen können,
wurden alle Methoden jetzt aktualisiert, um
Versprechen zurückzugeben, genau wie wir es mit dem DishService getan haben.
In ähnlicher Weise wurden auch die Werbedienste aktualisiert, um
Versprechungen von allen Methoden dort zurückzugeben.
Nun, auf die über Komponente gehen,
würden Sie sehen, dass in der über Komponente auch wir konfiguriert haben, um
die Werte innerhalb der dann des Versprechens dort zu erhalten.
In ähnlicher Weise würden Sie in der Dish-Detailkomponente feststellen, dass ich
dies neu konfiguriert habe, um mit dem Versprechen dort umzugehen.
In ähnlicher Weise
würden Sie in der Home-Komponente feststellen, dass innerhalb der Home-Komponente
alle drei Methoden hier: GetFeaturedDish,
FeaturedPromotion und FeaturedLeader aktualisiert wurden, wobei
die jeweils angehängt sind, um mit dem Versprechen umzugehen.
Der Code ist ziemlich ähnlich dem, was ich mit der Menükomponente illustriert habe.
Sobald Sie dies abgeschlossen haben,
lassen Sie uns einen kurzen Blick auf unsere Anwendung werfen. Wenn Sie
zu unserer Anwendung im Browser gehen,
werden Sie keinen Unterschied in der Anwendung sehen.
Es funktioniert genau auf die gleiche Weise wie zuvor,
außer jetzt verwendet es Versprechen, wenn
die Dienste implementiert sind und Ihre Komponenten
mit den Versprechen umgehen, wenn sie gelöst werden.
So funktioniert die Menükomponente korrekt und
auch die Gericht-Detailkomponente funktioniert auch korrekt.
Damit schließen wir diese Übung ab.
In dieser Übung haben wir gesehen, wie wir unsere Dienstleistungen verbessern konnten, um
Versprechen zu liefern, und wir haben auch unsere Komponenten aktualisiert, um mit Versprechen umgehen zu können.
Damit ist diese Übung abgeschlossen.
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit der Nachricht „Promise part one“ zu machen.