In der vorherigen Übung
haben wir unsere Angular-Anwendungsdienste aktualisiert, um Versprechen zu verwenden,
und auch die Komponenten zu aktualisieren, um
mit den Versprechen umzugehen, die von den Diensten zurückgegeben werden.
In dieser Übung, die eine Erweiterung zur vorherigen Übung darstellt,
werden wir eine Zeitverzögerung simulieren, damit das Versprechen gelöst werden kann.
In der vorherigen Übung
wurden die Versprechungen sofort gelöst.
Aber im wirklichen Leben,
wenn Sie Daten von einem Dienst anfordern und der Dienst ein Versprechen liefert
,
muss der Dienst wiederum die Daten von einem Back-End-Server abrufen, was
Zeit in Anspruch nehmen wird.
Also, für das Versprechen zu lösen,
wird es eine gewisse Zeitverzögerung geben.
Nun, wie gehen wir mit dieser Zeitverzögerung auf unserer Komponentenseite um?
Wie halten wir den Nutzer darüber auf dem Laufenden, dass es
eine Zeitverzögerung gibt, bevor die Daten abgerufen und dem Nutzer angezeigt werden können?
Wie gehen wir mit der Verzögerung selbst um?
In dieser Übung
simuliere ich nun die Zeitverzögerung mithilfe einer JavaScript-Methode in meinen Diensten
und aktualisiere dann auch die Komponenten, um dem Benutzer eine Nachricht mit der
Spinnerkomponente des Angular Materialfortschritts anzeigen zu können, um eine sich drehende Scheibe in
der Vorlagenansicht zu halten Sie den Benutzer über
die Tatsache informiert, dass die Daten vom Server abgerufen werden,
und wir werden in der Ansicht rendern, sobald die Daten für die
Komponente verfügbar werden, wenn die Zusage aufgelöst wird.
Mal sehen, wie wir das in dieser Übung tun können.
Wieder, zurück zu meinem Dienst,
hier habe ich den Geschirrservice hier geöffnet.
Anstatt das Versprechen sofort
zu lösen, werden wir nun ein Versprechen abgeben und dann
das Versprechen nach kurzer Zeit lösen lassen.
Also, um das zu tun, wird diese Versprechenserklärung nicht
mehr funktionieren, wie hier gezeigt, also werde ich das löschen.
Wenn meine Methode aufgerufen wird, gibt
die Methode stattdessen ein Versprechen zurück, indem sie ein neues Versprechen erstellt.
Sie erinnern sich, dass Sie, wenn Sie das neue Versprechen erstellt
haben, innerhalb des Versprechens die Funktion
mit Auflösen und Zurückweisen als die beiden Parameter haben würden.
Jetzt werde ich nur den Auflösungsteil davon verwenden.
Also, ich werde die Funktion innerhalb des Versprechens implementieren, nur mit einer Pfeilfunktion hier.
Ich werde also „Resolution“ sagen,
und ich werde eine kurze Verzögerung für diese Entschließung simulieren.
Lassen Sie mich einen Kommentar schreiben.
Simulieren Sie die Serverlatenz mit einer Verzögerung von zwei Sekunden.
Also, wie simulieren wir das?
Daher verwenden wir die setTimeout-Methode
, die in JavaScript verfügbar ist.
Also, für die setTimeout-Methode
werde ich wieder eine Pfeilfunktion implementieren,
die setTimeout-Methode hat keine Parameter, die wir dort benötigen.
Also, wenn dieses setTimeout ausgeführt wird,
dann wird es die Bereitstellung der DISHIELS auflösen.
Also, lassen Sie mich diese Gerichte schneiden und dann fügen Sie sie in die DISCHELN.
Sie sehen also, dass dieses Ergebnis jetzt das Ergebnis hier zurückgibt,
und dieses Ergebnis wird nach zwei Sekunden Verzögerung hier zurückgegeben.
Mit diesem Update wird unser Versprechen jetzt nach zwei Sekunden aufgelöst.
Die in JavaScript verfügbare setTimeout-Methode simuliert daher eine kurze Verzögerung.
Wie Sie sehen können,
simuliert es die kurze Verzögerung und nimmt hier einen Rückruf ein.
Dieser Callback, wie Sie sehen können,
habe ich es hier als Pfeilfunktion implementiert.
Also, keine Parameter und dann, wenn dies aufgelöst wird,
wird es die Rückkehr der DISCHES und die Verzögerung für das ist zwei Sekunden zu lösen.
Also, dieser Teil ist die Funktion,
und das ist die Zeitverzögerung, die wir hier haben.
Also, jetzt, mein Versprechen wird sich nach einer zwei-Sekunden-Verspätung lösen.
In ähnlicher Weise aktualisieren wir die verbleibenden beiden Methoden hier.
Also, um das zu tun,
werde ich nur
diesen Teil kopieren und dann einfach einfügen,
und Sie würden bemerken, dass das
wird und ich muss 2000 sagen.
Damit wird die setTimeout-Methode dort abgeschlossen.
Nun, wir werden
die schließende Klammer folgen lassen.
In ähnlicher Weise lassen Sie mich auch die letzte Methode aktualisieren.
Also, Sie sehen, dass es die DISCHES auflöst,
und dann nach zwei Sekunden Verzögerung,
und schließen Sie die Methode, um dort.
Das war's. Also, jetzt wird mein Geschirr-Service
aktualisiert, um alle Versprechen nach zwei Sekunden Verzögerung zu lösen.
Aktualisieren Sie nun auch den Leader-Service und
den Promotion-Dienst nach dem gleichen Muster, wie ich Ihnen hier gezeigt habe.
Der zweite Teil der Frage besteht darin, den Benutzer irgendwie darüber auf dem Laufenden zu halten
, dass es eine zeitliche Verzögerung bei der Erlangung der Ergebnisse gibt,
und so wird die Ansicht aktualisiert, sobald die Ergebnisse erhalten sind.
Sie haben diese Art von Verhalten in vielen Anwendungen gesehen,
einschließlich mobiler Anwendungen, bei denen Sie ein Spinner auf dem Bildschirm angezeigt haben, um
den Benutzer darüber zu informieren, dass etwas von hinter
den Kulissen geladen wird und wenn die Ergebnisse verfügbar sind,
wird die Ansicht aktualisiert werden.
Daher werden wir einen ähnlichen Ansatz innerhalb unserer Komponenten verwenden.
Um uns dabei zu helfen,
verwenden wir die Fortschrittsspinnerkomponente aus Angular Material.
Also, um die Fortschrittsspinner-Komponente
zu verwenden, gehen wir zuerst auf die app
module.ts Datei und importieren dann das Fortschrittsspinner-Modul dort.
Also, gehen Sie zu app module.ts.
Wir werden zuerst hier gehen, um
das MatProgressSpinnerModule aus Winkel/Material/Progress-Spinner zu importieren.
Sobald wir dies in die Datei importiert haben,
gehen wir in den NG-Modul-Dekorator in die Importe
und fügen dann das MatProgressSpinnerModule hinzu.
Sobald wir dies abgeschlossen
haben, können wir die Komponenten aktualisieren, um den Fortschrittsspinner zu nutzen.
Also hier werde ich Ihnen ein Beispiel zeigen, indem ich
illustriere, wie wir die Menükomponente aktualisieren können, um diese Informationen anzuzeigen.
Also, gehen Sie in die Menükomponenten-Layoutdatei.
Hier sehen wir, dass wir das Menü mit der Rasterliste hier zeigen.
Also, was wir tun werden, ist, für dieses div
werde ich die nGIF-Direktive verwenden und sagen, dass dies angezeigt werden sollte.
Das Menü sollte nur angezeigt werden, wenn Gerichte nicht null sind.
Also zunächst, in Ihrer Komponenten-Tab-Skriptdatei,
werden Sie sehen, dass, wenn Sie auf die Komponenten-Tab-Skriptdatei gehen, Sie werden sehen, dass
Ihre Gerichte derzeit nur ein undefiniertes Objekt hier sind,
und dass Gerichte dem Geschirr Wert nur zugewiesen werden, wenn die Probleme gelöst werden.
Bis zu diesem Zeitpunkt
werden die Gerichte ein undefinierter Wert sein.
Also, wir können diese Tatsache nutzen
und dann unsere Vorlage so neu gestalten, dass
wir sagen würden, zeigen Sie dieses div nur, wenn das Geschirr kein undefiniertes oder kein Null-Objekt ist.
Wenn es unbekannt ist,
werde ich hier ein zweites div mit dem versteckten Attribut verwenden, das damit verbunden ist.
Also, Sie haben gesehen, dass Versteckte verwendet werden.
Also, ich werde das verwenden, um den Stamm zu definieren.
Also, was das bedeutet, ist, dass, wenn Gerichte nicht null sind,
dieses div versteckt wird.
Wenn Gerichte null ist,
dann wird dieses div angezeigt.
Also, jetzt sehen Sie, dass Sie zwei divs hier haben.
Der erste wird angezeigt, wenn das Geschirr nicht null Gericht Array ist.
Andernfalls wird der zweite Teil angezeigt.
Also, mit dieser kleinen Änderung meiner Vorlage,
ich bin in der Lage, das Menü zu verstecken, bis zu dem Punkt, dass das Geschirr Array für mich verfügbar wird,
und wenn das Geschirr Array verfügbar wird,
dann werde ich das Menü zeigen.
Bis dahin werde ich einen Mat-Spinner zeigen. Das
Zahlenauswahlfeld „Fortschritt“
ist unbestimmt, das als Winkelmaterialkomponente verfügbar ist.
Also, dies wird in meiner Ansicht als rotierender Kreis angezeigt,
für diese Menükomponente bis zu dem Punkt, an dem die Ergebnisse erhalten werden,
wenn die Probleme gelöst werden.
Darüber hinaus werde ich auch h4 verwenden, und innerhalb der h4
werde ich sagen, laden, bitte warten.
Was passiert, ist, dass, wenn das Geschirr noch nicht aufgelöst ist,
der Spinner und diese Nachricht auf dem Bildschirm angezeigt werden.
In dem Moment, in dem das Geschirr verfügbar ist, wenn die versprochenen Ergebnisse,
dann wird das Menü auf dem Bildschirm angezeigt.
Jetzt werden wir ähnliche Aktualisierungen über die Komponente,
die Home-Komponente und die Dish Detailkomponente auch durchführen.
Entsprechend werden wir den Leader-Service
und den Promotion-Dienst auch aktualisieren, um die Zeitverzögerung zu simulieren.
Verwenden Sie also das Muster, das ich Ihnen gerade gezeigt habe,
und aktualisieren Sie die Dienste und auch die entsprechenden Vorlagen,
und wir werden das Ergebnis sehen, nachdem wir das Update abgeschlossen haben.
Nachdem Sie die Updates aller Dienste und der
entsprechenden Vorlagen für die Komponenten abgeschlossen haben,
lassen Sie mich Sie hier schnell durch die aktualisierten Dateien führen.
Also, das ist Führerdienst.
Sie können also sehen, dass ich im Leader-Service die
GetLeaders aktualisiert habe, um das SetTimeout genau so zu verwenden, wie wir es mit den Gerichten getan haben,
und der GetLeader und der GetFeaturedLeader auch.
In ähnlicher Weise
haben wir im Promotion-Dienst die GetPromotions GetPromotion ID und die GetFeaturedPromotion aktualisiert.
Daher werden die drei Dienste jetzt aktualisiert,
um eine Zeitverzögerung zu verursachen, bevor sie das Ergebnis zurückgeben.
Nun, in Bezug auf die Vorlagen,
haben wir bereits die menu.component Vorlage aktualisiert.
Schauen wir uns die home.components-Vorlagen an.
Also, innerhalb der home.component,
Sie erkennen, dass, als wir die home.component entworfen
haben, wir die Karten bereits mit dem Stern nGIF-Gericht konfiguriert hatten.
Also, alles, was wir tun müssen, ist,
unten hier unten fügen wir ein div mit
dem versteckten und Gericht hier, aber den Spinner, genau wie wir es mit dem Menü getan haben.component.
In ähnlicher Weise hat die Mat-Karte für die Promotion bereits das NGIF an Ort und Stelle,
also müssen wir nur dieses zusätzliche div hier mit der versteckten Promotion hinzufügen,
und auch für den Führer hier unten.
In ähnlicher Weise gehen Sie auf die Schüssel Detailkomponente.
In der Gerichtendetailkomponente
hatten wir bereits die Liste mit dem NGIF-Gericht für die Kommentare.
Auch das NGIF-Gericht für die Karte, die die Details des Gerichts anzeigt.
Also, alles, was wir tun müssen, ist in diesem neuen div mit dem versteckten Gericht hier
und dem div Spinner an Ort und Stelle hinzuzufügen.
In ähnlicher Weise, in der über Komponente,
wenn Sie in die über Komponente gehen,
würden Sie sehen, dass wir die Unternehmensführer hier hatten,
und wir hatten bereits die Liste mit dem Star NGIF mit Führungskräften.
Also, alles, was wir tun müssen, ist in das div mit
versteckten und Führern hier mit einem Spinner an Ort und Stelle hinzuzufügen. Das war's.
Unsere Anwendung ist jetzt aktualisiert.
Werfen wir einen Blick auf die aktualisierte Anwendung im Browser als nächstes. Wenn Sie
zum Browser gehen,
werden Sie sehen, dass, wenn Sie versuchen, die Home-Komponente zu laden,
es eine kurze Zeit gibt, in der Sie den Spinner auf
dem Bildschirm sehen, bevor die Karten geladen werden.
In ähnlicher Weise, wenn Sie zum Menü gehen. Komponente,
würden Sie den Spinner auf der linken Seite für
zwei Sekunden sehen, bevor das eigentliche Menü aktualisiert wird,
und wenn Sie zu einem einzelnen Gericht gehen, sehen Sie auch, dass
der Spinner auf dem Bildschirm, bevor die Details des Gerichts gerendert werden,
und in der über Komponente auch ähnlich, werden Sie sehen, dass
Sie den drehenden Kreis dort haben, bevor die Informationen der Führungslinie aktualisiert werden.
Jedes Mal, wenn wir zu einem dieser gehen,
würden Sie eine ähnliche kurze Verzögerung sehen, bevor die Entzündung auf dem Bildschirm aktualisiert wird.
Damit sehen Sie, wie Sie mit Verzögerungen beim Erhalten der Ergebnisse umgehen können,
oder Verzögerung bei der Auflösung des Versprechens von der Service-Seite innerhalb Ihrer Komponente
und halten Sie den Benutzer über die Tatsache, dass es
eine kurze Verzögerung, bevor der Bildschirm aktualisiert wird, informiert.
Damit ist diese Übung abgeschlossen.
In dieser Übung haben wir gesehen, wie wir eine kurze Verzögerung mit unseren Versprechen simulieren können. Wir haben uns
von den Diensten gelöst,
und wir haben auch gesehen, wie Sie den Benutzer auf dem Laufenden halten können, indem Sie die MD-Spinner
Winkelmaterialkomponenten verwenden, um auf
dem Bildschirm für die Dauer anzuzeigen, wenn die Ergebnisse noch nicht verfügbar sind,
dh für die Dauer, bis das Versprechen gelöst wird.
Damit ist diese Übung abgeschlossen.
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit dem Nachrichtenversprechen Teil zwei zu machen.