Dopo la breve introduzione alle promesse nella lezione precedente,
passiamo al nostro prossimo esercizio in cui
faremo uso delle promesse all'interno della nostra applicazione angolare.
In particolare, le promesse sono un modo essenziale per affrontare i ritardi, soprattutto
quando si ha bisogno di accedere e ottenere i dati da un server
prima di essere consegnati al componente attraverso il servizio.
Pertanto, i servizi spesso restituiscono promesse ai
componenti quando i componenti chiamano i metodi di servizio,
e successivamente quando la promessa si
risolve, i componenti avranno i risultati disponibili per loro.
Riconfigureremo i servizi che abbiamo all'interno della
nostra applicazione angolare per restituire
le promesse e poi riconfigureremo
i nostri componenti per essere in grado di gestire le promesse.
Il nostro primo passo in questo esercizio è riconfigurare tutti i servizi per restituire le promesse.
Quindi ognuno dei metodi all'interno del nostro servizio invece di restituire
immediatamente il valore restituirà promesse.
Quindi, come configuriamo i nostri servizi per restituire le promesse?
Quindi, andando al file dishservice.ts,
il metodo getDises qui restituirà una promessa invece della matrice di piatti.
Quindi, configuriamo il metodo GetDises per restituire la
promessa racchiudendo questo oggetto piatto all'interno di una promessa.
Ciò significa che se la promessa si risolve, il risultato fornito
dalla promessa GetDises sarebbe un array di piatti.
Quindi, all'interno del tuo componente
riceverai l'array piatto se la promessa risulta correttamente.
Ora che abbiamo configurato il GetDises per restituire una promessa,
abbiamo bisogno di riconfigurare il codice in modo
che questo array piatti verrà restituito come parte di una promessa.
Ora dal momento che abbiamo il risultato già disponibile,
userò il metodo di scelta rapida per
restituire la promessa risolvendo immediatamente la promessa.
Ora, ovviamente, questo funziona bene se hai i risultati immediatamente disponibili con te.
Ma, quando riconfigura il tuo servizio per
essere in grado di andare a recuperare questi dati da un server,
allora dovremo riscrivere questo codice per affrontare il fatto che
il servizio non restituirà
immediatamente il risultato, invece dovrai aspettare un po 'di tempo.
Nel prossimo esercizio,
stiamo andando a simulare il ritardo utilizzando un metodo JavaScript in modo che ti dà
una sensazione di cosa significa affrontare i ritardi nel ricevere un risultato da una promessa.
Ora che abbiamo configurato il GetDises per restituire la promessa,
allo stesso modo, riconfigureremo i restanti due metodi.
Quindi ho intenzione di copiare questa promessa da
qui e poi semplicemente allegare questo ai restanti due lì, in
modo che li convertirò anche per restituire
promesse e poi, naturalmente, qualsiasi cosa
abbiamo qui dovrebbe essere racchiusa all'interno della promessa di risoluzione.
Quindi ho intenzione di copiare la promessa di risoluzione
e racchiudere questo all'interno della risoluzione qui.
Allo stesso modo, per il piatto in primo piano racchiuderò questo all'interno della promessa di risoluzione.
Ora, il mio servizio piatto è configurato per restituire le promesse.
Ovviamente, questo significa anche che ho bisogno di andare ai
miei componenti e quindi riconfigurare i componenti per essere in grado di
affrontare il fatto che non stanno ricevendo i dati
immediatamente invece stanno ricevendo una promessa e quindi
dovranno implementare il metodo then all'interno del
quale la promessa quando il risultato ti consegnerà i dati.
Quindi, ora che abbiamo configurato il servizio piatto,
conosciamo un luogo in cui il servizio viene utilizzato attivamente e che è componente menu.
Permettetemi di mostrarvi come riconfigureremo
il componente per essere in grado di affrontare la promessa.
Quindi, quando vai al menucomponent.ts
noterai subito che c'è una linea rossa ondulata sotto i piatti perché,
come vedi, ora,
il dishservice.GetDish sta restituendo una promessa e poi qui hai,
la promessa viene assegnata a un oggetto array piatto e questo non è corretto.
Come riconfigurare questo codice?
Quindi, come ho detto,
quando riconfiguriamo il codice,
abbiamo bisogno di implementare il then e il catch per GetDises.
Quindi, lasciami andare avanti e implementare solo l'allora in questo momento,
per il metodo GetDises perché il catch può essere implementato in seguito.
In questo momento sappiamo che la promessa si risolverà sempre correttamente,
quindi implementeremo il metodo then qui,
e poi, all'interno del metodo then,
riceverò l'oggetto piatti in arrivo quando la promessa si risolve.
E quando questo è l'oggetto piatti entra come parametro,
quindi vedi che sto scrivendo una funzione freccia qui,
ho solo intenzione di ritagliarlo e includerlo proprio lì.
Ecco a te. Questo è il modo in cui il componente può ora
prendere possesso della promessa e quindi recuperare i risultati quando la promessa viene risolta.
Puoi vedere che abbiamo il getDishService e quindi il metodo then
cambia ad esso e per cui quando viene chiamato il then,
quando la promessa si risolve dall'altra parte,
i piatti ti verranno consegnati perché il metodo getDishes
restituisce una promessa, ma il risultato sarà una matrice di piatti.
Quella matrice di piatti arriva come parametro qui quindi sto scrivendo una funzione freccia
qui dove sto assegnando che questi piatti ai piatti.
Quindi, quando questa promessa si risolve, i piatti
saranno assegnati a questi piatti. Questo è tutto.
Ora il mio componente di menu è pronto per affrontare la promessa.
Naturalmente, per gestire l'errore è anche necessario
concatenare il metodo catch nel metodo getDises.
Quindi, il then e il catch sono metodi che
la promessa fornisce per te e quindi lo implementi e all'interno del
quale fornisci la funzione che
si occupa della situazione in cui la promessa si risolve o quando la promessa rifiuta con un errore.
Allo stesso modo, dovremmo riconfigurare il metodo di dettaglio piatto
e anche il componente home per affrontare il fatto che
DishService sta ora fornendo promesse piuttosto che consegnare i valori immediatamente.
Mentre ci siamo,
potremmo anche riconfigurare sia il leader che il servizio di promozione anche.
Quindi lo lascerò come un esercizio per voi da completare,
aggiornando sia il servizio leader che il servizio di promozione per essere in grado di
consegnare le corrispondenti promesse.
Inoltre, di conseguenza, dovrai riconfigurare
il codice script del tipo di componente nel componente about nel componente dettaglio piatto,
nel componente home per affrontare il fatto che
ora stai ricevendo promesse piuttosto che i risultati effettivi.
Quindi vi lascerò completare quella parte invece di illustrare tutto ciò in dettaglio,
vi ho mostrato un passo con la componente dettaglio piatto.
Completare i passaggi sia con il leader che con il servizio di promozione,
quindi configurare i componenti corrispondenti di conseguenza.
Permettetemi di illustrarvi rapidamente gli aggiornamenti che dovete completare.
Così come vedete il servizio leader che ho già aggiornato con la promessa.
Come puoi vedere qui,
tutti i metodi ora sono stati aggiornati per restituire
le promesse proprio come abbiamo fatto con DishService.
Allo stesso modo, i servizi di promozione anche aggiornato per
restituire le promesse da tutti i metodi lì.
Ora, andando al componente su,
si vedrebbe che nel componente su anche abbiamo configurato per
ricevere i valori all'interno del allora della promessa lì.
Allo stesso modo, nella componente dettaglio piatto si noterà che ho
riconfigurato questo per affrontare la promessa lì.
Allo stesso modo, nel componente home,
si noterà che all'interno del componente home
tutti e tre i metodi qui: getFeaturedDish,
FeaturedPromotion e FeaturedLeader sono stati aggiornati,
con l'allora allegato a ciascuno di essi per gestire la promessa.
Il codice è praticamente simile a quello che ho illustrato con il componente menu.
Una volta completato questo,
diamo uno sguardo rapido alla nostra applicazione.
Andando alla nostra applicazione nel browser,
non vedrai alcuna differenza nell'applicazione.
Funziona esattamente allo stesso modo di prima,
tranne che ora sta usando le promesse quando
i servizi sono implementati e i tuoi componenti
si occupano delle promesse quando vengono risolti.
Quindi il componente del menu funziona correttamente e
anche il componente dettaglio piatto funziona correttamente.
Con questo, completiamo questo esercizio.
In questo esercizio abbiamo visto come siamo stati in grado di aggiornare i nostri servizi per
offrire promesse e abbiamo anche aggiornato i nostri componenti per essere in grado di gestire le promesse.
Questo completa questo esercizio.
Questo è un buon momento per fare un commit git con il messaggio «Prometti parte uno».