Nell'esercizio precedente,
abbiamo aggiornato i nostri servizi di applicazioni angolari per utilizzare le promesse
e aggiornando anche i componenti per
gestire le promesse restituite dai servizi.
In questo esercizio, che è un'estensione dell'esercizio precedente,
verrà simulato un ritardo di tempo per la promessa di risolvere.
Nell' esercizio precedente,
le promesse si stavano risolvendo immediatamente.
Ma nella vita reale,
quando si richiedono dati da un servizio e il servizio fornisce una promessa,
il servizio, a sua volta,
deve andare a recuperare i dati da un server back-end,
e questo richiederà tempo.
Quindi, affinché la promessa si risolva,
ci sarà una certa quantità di ritardo.
Ora, come affrontiamo questo ritardo di tempo sul nostro lato componente?
Come teniamo l'utente informato sul fatto che c'è
un ritardo temporale coinvolto prima che i dati possano essere recuperati e mostrati all'utente?
Come affrontiamo il ritardo stesso?
Ora, in questo esercizio,
simulerò il ritardo di tempo utilizzando un metodo JavaScript all'interno dei miei servizi,
e quindi aggiornerò anche i componenti per essere in grado di mostrare un messaggio all'utente utilizzando
il componente spinner avanzamento materiale angolare per mostrare un disco rotante
nella vista modello su tenere l'utente informato sul
fatto che i dati vengono recuperati dal server,
e eseguiremo il rendering nella vista non appena i dati diventano
disponibili per il componente quando la promessa si risolve.
Vediamo come possiamo farlo in questo esercizio.
Di nuovo, tornando al mio servizio,
qui ho il servizio piatto aperto qui.
Invece di avere la promessa risolta immediatamente,
ora faremo una promessa e poi lasceremo che
la promessa si risolva dopo un breve periodo di tempo.
Quindi, per fare ciò, questa promessa di risoluzione non funzionerà
più come mostrato qui, quindi ho intenzione di cancellarlo.
Invece, quando viene chiamato il mio metodo,
il metodo restituirà una promessa creando una nuova promessa.
Ricordi che quando hai creato la nuova promessa,
all'interno della promessa avresti la funzione
con risoluzione e rifiuto come i due parametri.
Ora, ho intenzione di usare solo la parte risolvibile di esso.
Quindi, implementerò la funzione all'interno della promessa usando solo una funzione freccia qui.
Quindi, dirò risolvi,
e simulerò un breve ritardo affinché questa risoluzione abbia luogo.
Permettetemi di scrivere un commento.
Simula la latenza del server con un ritardo di due secondi.
Quindi, come simuliamo questo?
Quindi, usiamo il metodo setTimeout
che è disponibile in JavaScript.
Quindi, per il metodo setTimeout,
ancora una volta, implementerò una funzione freccia,
il metodo setTimeout non ha alcun parametro di cui abbiamo bisogno lì.
Quindi, quando questo setTimeout viene eseguito,
allora risolverà la consegna dei PIATES.
Quindi, lasciami tagliare questo PIATTI e poi incollarlo nei PIATTI.
Quindi, vedi che questo risultato sta restituendo il risultato qui,
e questo risultato verrà restituito dopo due secondi di ritardo qui.
Con questo aggiornamento, la nostra promessa verrà risolta dopo due secondi.
Quindi, il metodo setTimeout disponibile in JavaScript simula un breve ritardo.
Quindi, come puoi vedere,
simula il breve ritardo e prende una richiamata qui.
Questo callback come puoi vedere, l'
ho implementato come funzione freccia qui.
Quindi, nessun parametro e poi quando questo si risolve,
si risolverà restituendo i piatti e il ritardo per questo è di due secondi.
Quindi, questa parte è la funzione,
e questo è il ritardo che abbiamo qui.
Quindi, ora, la mia promessa si risolverà dopo un ritardo di due secondi.
Allo stesso modo, aggiorniamo i restanti due metodi qui.
Quindi, per farlo,
ho intenzione di copiare
quella parte e poi semplicemente incollarla lì dentro,
e si noterà che
sarà e ho bisogno di dire 2000.
Quindi, questo completa il metodo setTimeout lì.
Ora, faremo
seguire la parentesi di chiusura.
Allo stesso modo, permettetemi di aggiornare anche l'ultimo metodo.
Quindi, vedi che risolve i piatti,
e poi dopo due secondi di ritardo,
e chiudi il metodo a lì.
Questo è tutto. Quindi, ora il mio servizio piatto è
aggiornato per risolvere tutte le promesse dopo due secondi di ritardo.
Ora, allo stesso modo, aggiorna il servizio leader e
il servizio di promozione usando lo stesso schema che ti ho mostrato qui.
La seconda parte della domanda è quella di mantenere in qualche modo l'utente informato sul
fatto che c'è un ritardo di tempo coinvolto nell'ottenere i risultati,
e quindi la vista si aggiornerà non appena verranno ottenuti i risultati.
Hai visto questo tipo di comportamento in molte applicazioni,
comprese le applicazioni mobili in cui si avrebbe uno spinner mostrato sullo schermo per mantenere
l'utente informato sul fatto che qualcosa viene caricato da dietro
le quinte e quando i risultati diventano disponibili,
la vista essere aggiornato.
Quindi, useremo un approccio simile all'interno dei nostri componenti.
Per aiutarci con questo,
useremo il componente spinner progresso da materiale angolare.
Quindi, per utilizzare il componente spinner di avanzamento,
andiamo prima al
file dell'app module.ts e quindi importare il modulo di avanzamento spinner lì.
Quindi, andando a app module.ts.
Prima andremo qui per importare
il MatProgressSpinnerModule da angolare/materiale/progresse-spinner.
Una volta che abbiamo importato questo nel file,
allora andremo nel decoratore del modulo ng nelle importazioni,
e quindi aggiungere il MatProgressSpinnerModule in quello.
Una volta completato questo,
allora possiamo aggiornare i componenti per fare uso dello spinner di avanzamento.
Quindi qui, vi mostrerò un esempio
illustrando come possiamo aggiornare il componente menu per mostrare queste informazioni.
Quindi, vai nel file di layout dei componenti del menu.
Qui, vediamo che stiamo mostrando il menu utilizzando la lista griglia qui.
Quindi, quello che faremo è, per questo div,
userò la direttiva NGif e dirò che questo dovrebbe essere visualizzato.
Il menu dovrebbe essere visualizzato solo quando i piatti non sono nulli.
Quindi inizialmente, nel file di script della scheda dei componenti,
vedrai che quando vai al file di script della scheda dei componenti vedrai che
i tuoi piatti sono attualmente solo un oggetto indefinito qui,
e che i piatti verranno assegnati al valore dei piatti solo quando i problemi si risolvono.
Quindi, fino a quel momento,
i piatti saranno un valore indefinito.
Quindi, possiamo approfittare di questo fatto,
e quindi riprogettare il nostro modello in modo tale che,
diremo mostrare questo div solo se i piatti non sono un oggetto indefinito o non nullo.
Quando è sconosciuto,
userò un secondo div qui con l'attributo nascosto associato ad esso.
Quindi, hai visto nascosto essere usato prima.
Quindi, ho intenzione di usarlo per definire lo stelo.
Quindi, ciò che significa è che se i piatti non sono nulli,
allora questo div sarà nascosto.
Se i piatti sono nulli,
verrà mostrato questo div.
Quindi, ora vedi che hai due div qui.
Il primo verrà mostrato se i piatti non sono array di piatti nulli.
Altrimenti, verrà mostrata la seconda parte.
Quindi, con questo piccolo cambiamento al mio modello,
sono in grado di nascondere il menu fino al punto in cui l'array di piatti diventa disponibile per me,
e quando l'array di piatti diventa disponibile,
allora mostrerò il menu.
Fino a quel momento, mostrerò un mat-spinner.
Che è spinner progresso indeterminato
che è disponibile come componente materiale angolare.
Quindi, questo mostrerà come un cerchio rotante a mio avviso,
per questo componente del menu fino al punto in cui si ottengono i risultati,
quando i problemi si risolvono.
Inoltre, userò anche h4, e all'interno di h4,
dirò il caricamento, per favore aspetta.
Quindi, quello che succede è che quando i piatti non sono ancora risolti,
lo spinner e questo messaggio verranno visualizzati sullo schermo.
Nel momento in cui i piatti diventano disponibili quando i risultati promessi,
il menu verrà visualizzato sullo schermo.
Ora, faremo aggiornamenti simili sul componente,
il componente di casa, e il componente di dettaglio piatto anche.
Di conseguenza, aggiorneremo il servizio leader
e il servizio di promozione anche per simulare il ritardo temporale.
Quindi, usando il modello che ti ho appena illustrato,
vai avanti e aggiorna i servizi e anche i modelli corrispondenti,
e vedremo il risultato dopo aver terminato l'aggiornamento.
Dopo aver completato gli aggiornamenti di tutti i servizi e
dei modelli corrispondenti per i componenti,
permettetemi di eseguire rapidamente i file aggiornati qui.
Quindi, questo e' il servizio leader.
Quindi, puoi vedere che nel servizio leader,
ho aggiornato GetLeaders per utilizzare setTimeout esattamente come abbiamo fatto con i piatti,
e anche GetLeader e GetFeaturedLeader.
Allo stesso modo, nel servizio di promozione,
abbiamo aggiornato anche l'ID GetPromotions GetPromotion e GetFeaturedPromotion.
Pertanto, i tre servizi sono ora aggiornati
per causare un ritardo di tempo prima che restituiscano il risultato.
Ora, in termini di modelli,
abbiamo già aggiornato il modello menu.component.
Diamo un'occhiata ai modelli casa.components.
Quindi, all'interno della home.component,
ti rendi conto che quando abbiamo progettato la home.component,
avevamo già configurato le schede con il piatto stella NGif.
Quindi, tutto quello che dobbiamo fare è,
qui sotto aggiungiamo un div con
il nascosto e piatto qui ma lo spinner proprio come abbiamo fatto con il menu.component.
Allo stesso modo, per la promozione la mat-card ha già il NGIF in atto,
quindi abbiamo solo bisogno di aggiungere questo div aggiuntivo qui con la promozione nascosta lì,
e anche per il leader qui sotto.
Allo stesso modo, andando al componente dettaglio piatto.
Nel componente dettaglio piatto,
abbiamo già avuto la lista con il piatto NGIF per i commenti.
Inoltre, il piatto NGIF per la carta che visualizza i dettagli del piatto.
Quindi, tutto ciò che dobbiamo fare è aggiungere in questo nuovo div con il piatto nascosto qui
e lo spinner div in posizione.
Allo stesso modo, nel componente su,
quando si entra nel componente su,
si vedrebbe che abbiamo avuto i leader aziendali qui,
e abbiamo già avuto la lista con la stella NGIF con i leader.
Quindi, tutto ciò che dobbiamo fare è aggiungere nel div con
nascosti e leader qui con uno spinner in posizione. Questo è tutto.
La nostra applicazione è ora aggiornata.
Diamo un'occhiata all'applicazione aggiornata nel browser successivo.
Andando al browser,
vedrai che quando provi a caricare nel componente di casa,
c'è un breve periodo di tempo in cui vedi lo spinner sullo
schermo prima che le carte vengano caricate.
Allo stesso modo, quando vai al menu.component,
vedresti lo spinner sul lato sinistro per
due secondi prima che il menu effettivo venga aggiornato,
e quando vai a un singolo piatto vedi anche che
lo spinner sullo schermo prima che i dettagli del piatto vengano renderizzati,
e nel su componente anche allo stesso modo, si vedrà che,
si avrà il cerchio di rotazione lì prima che le informazioni del leader vengano aggiornate.
Ogni volta che passiamo a uno di questi,
si vedrebbe un breve ritardo simile prima che l'infiammazione venga aggiornata sullo schermo.
Quindi, con questo vedi come puoi affrontare il ritardo nell'ottenere i risultati,
o ritardare la risoluzione della promessa dal lato del servizio all'interno del tuo componente
e mantenere l'utente informato sul fatto che c'è
un breve ritardo prima che lo schermo venga aggiornato.
Questo completa questo esercizio.
In questo esercizio, abbiamo visto come possiamo simulare un breve ritardo con le nostre promesse.
Come risolvere dai servizi,
e abbiamo anche visto come mantenere l'utente informato utilizzando i
componenti del materiale angolare spinner MD da mostrare sullo schermo per
la durata quando i risultati non sono ancora disponibili,
cioè per la durata fino a quando la promessa viene risolta.
Questo completa questo esercizio.
Questo è un buon momento per fare un commit git con il messaggio promessa Parte due.