1 00:00:03,830 --> 00:00:09,840 Dopo la breve introduzione alle promesse nella lezione precedente, 2 00:00:09,840 --> 00:00:12,270 passiamo al nostro prossimo esercizio in cui 3 00:00:12,270 --> 00:00:15,235 faremo uso delle promesse all'interno della nostra applicazione angolare. 4 00:00:15,235 --> 00:00:24,060 In particolare, le promesse sono un modo essenziale per affrontare i ritardi, soprattutto 5 00:00:24,060 --> 00:00:27,885 quando si ha bisogno di accedere e ottenere i dati da un server 6 00:00:27,885 --> 00:00:32,915 prima di essere consegnati al componente attraverso il servizio. 7 00:00:32,915 --> 00:00:36,440 Pertanto, i servizi spesso restituiscono promesse ai 8 00:00:36,440 --> 00:00:41,050 componenti quando i componenti chiamano i metodi di servizio, 9 00:00:41,050 --> 00:00:43,490 e successivamente quando la promessa si 10 00:00:43,490 --> 00:00:47,385 risolve, i componenti avranno i risultati disponibili per loro. 11 00:00:47,385 --> 00:00:51,920 Riconfigureremo i servizi che abbiamo all'interno della 12 00:00:51,920 --> 00:00:55,970 nostra applicazione angolare per restituire 13 00:00:55,970 --> 00:00:58,550 le promesse e poi riconfigureremo 14 00:00:58,550 --> 00:01:02,390 i nostri componenti per essere in grado di gestire le promesse. 15 00:01:02,390 --> 00:01:10,925 Il nostro primo passo in questo esercizio è riconfigurare tutti i servizi per restituire le promesse. 16 00:01:10,925 --> 00:01:14,704 Quindi ognuno dei metodi all'interno del nostro servizio invece di restituire 17 00:01:14,704 --> 00:01:18,500 immediatamente il valore restituirà promesse. 18 00:01:18,500 --> 00:01:21,685 Quindi, come configuriamo i nostri servizi per restituire le promesse? 19 00:01:21,685 --> 00:01:26,635 Quindi, andando al file dishservice.ts, 20 00:01:26,635 --> 00:01:35,390 il metodo getDises qui restituirà una promessa invece della matrice di piatti. 21 00:01:35,390 --> 00:01:38,840 Quindi, configuriamo il metodo GetDises per restituire la 22 00:01:38,840 --> 00:01:43,695 promessa racchiudendo questo oggetto piatto all'interno di una promessa. 23 00:01:43,695 --> 00:01:49,235 Ciò significa che se la promessa si risolve, il risultato fornito 24 00:01:49,235 --> 00:01:55,435 dalla promessa GetDises sarebbe un array di piatti. 25 00:01:55,435 --> 00:01:59,164 Quindi, all'interno del tuo componente 26 00:01:59,164 --> 00:02:03,290 riceverai l'array piatto se la promessa risulta correttamente. 27 00:02:03,290 --> 00:02:07,845 Ora che abbiamo configurato il GetDises per restituire una promessa, 28 00:02:07,845 --> 00:02:10,370 abbiamo bisogno di riconfigurare il codice in modo 29 00:02:10,370 --> 00:02:14,735 che questo array piatti verrà restituito come parte di una promessa. 30 00:02:14,735 --> 00:02:18,770 Ora dal momento che abbiamo il risultato già disponibile, 31 00:02:18,770 --> 00:02:22,190 userò il metodo di scelta rapida per 32 00:02:22,190 --> 00:02:27,875 restituire la promessa risolvendo immediatamente la promessa. 33 00:02:27,875 --> 00:02:34,720 Ora, ovviamente, questo funziona bene se hai i risultati immediatamente disponibili con te. 34 00:02:34,720 --> 00:02:38,120 Ma, quando riconfigura il tuo servizio per 35 00:02:38,120 --> 00:02:41,885 essere in grado di andare a recuperare questi dati da un server, 36 00:02:41,885 --> 00:02:46,670 allora dovremo riscrivere questo codice per affrontare il fatto che 37 00:02:46,670 --> 00:02:49,310 il servizio non restituirà 38 00:02:49,310 --> 00:02:52,875 immediatamente il risultato, invece dovrai aspettare un po 'di tempo. 39 00:02:52,875 --> 00:02:54,430 Nel prossimo esercizio, 40 00:02:54,430 --> 00:03:03,290 stiamo andando a simulare il ritardo utilizzando un metodo JavaScript in modo che ti dà 41 00:03:03,290 --> 00:03:12,875 una sensazione di cosa significa affrontare i ritardi nel ricevere un risultato da una promessa. 42 00:03:12,875 --> 00:03:16,865 Ora che abbiamo configurato il GetDises per restituire la promessa, 43 00:03:16,865 --> 00:03:20,770 allo stesso modo, riconfigureremo i restanti due metodi. 44 00:03:20,770 --> 00:03:24,890 Quindi ho intenzione di copiare questa promessa da 45 00:03:24,890 --> 00:03:30,430 qui e poi semplicemente allegare questo ai restanti due lì, in 46 00:03:30,430 --> 00:03:34,220 modo che li convertirò anche per restituire 47 00:03:34,220 --> 00:03:37,100 promesse e poi, naturalmente, qualsiasi cosa 48 00:03:37,100 --> 00:03:40,225 abbiamo qui dovrebbe essere racchiusa all'interno della promessa di risoluzione. 49 00:03:40,225 --> 00:03:43,129 Quindi ho intenzione di copiare la promessa di risoluzione 50 00:03:43,129 --> 00:03:50,675 e racchiudere questo all'interno della risoluzione qui. 51 00:03:50,675 --> 00:04:00,080 Allo stesso modo, per il piatto in primo piano racchiuderò questo all'interno della promessa di risoluzione. 52 00:04:00,080 --> 00:04:05,005 Ora, il mio servizio piatto è configurato per restituire le promesse. 53 00:04:05,005 --> 00:04:07,610 Ovviamente, questo significa anche che ho bisogno di andare ai 54 00:04:07,610 --> 00:04:11,360 miei componenti e quindi riconfigurare i componenti per essere in grado di 55 00:04:11,360 --> 00:04:14,090 affrontare il fatto che non stanno ricevendo i dati 56 00:04:14,090 --> 00:04:17,720 immediatamente invece stanno ricevendo una promessa e quindi 57 00:04:17,720 --> 00:04:21,200 dovranno implementare il metodo then all'interno del 58 00:04:21,200 --> 00:04:25,550 quale la promessa quando il risultato ti consegnerà i dati. 59 00:04:25,550 --> 00:04:28,639 Quindi, ora che abbiamo configurato il servizio piatto, 60 00:04:28,639 --> 00:04:35,020 conosciamo un luogo in cui il servizio viene utilizzato attivamente e che è componente menu. 61 00:04:35,020 --> 00:04:37,730 Permettetemi di mostrarvi come riconfigureremo 62 00:04:37,730 --> 00:04:40,640 il componente per essere in grado di affrontare la promessa. 63 00:04:40,640 --> 00:04:44,420 Quindi, quando vai al menucomponent.ts 64 00:04:44,420 --> 00:04:49,984 noterai subito che c'è una linea rossa ondulata sotto i piatti perché, 65 00:04:49,984 --> 00:04:51,880 come vedi, ora, 66 00:04:51,880 --> 00:04:58,875 il dishservice.GetDish sta restituendo una promessa e poi qui hai, 67 00:04:58,875 --> 00:05:05,660 la promessa viene assegnata a un oggetto array piatto e questo non è corretto. 68 00:05:05,660 --> 00:05:08,005 Come riconfigurare questo codice? 69 00:05:08,005 --> 00:05:09,559 Quindi, come ho detto, 70 00:05:09,559 --> 00:05:11,440 quando riconfiguriamo il codice, 71 00:05:11,440 --> 00:05:16,100 abbiamo bisogno di implementare il then e il catch per GetDises. 72 00:05:16,100 --> 00:05:20,820 Quindi, lasciami andare avanti e implementare solo l'allora in questo momento, 73 00:05:20,820 --> 00:05:27,360 per il metodo GetDises perché il catch può essere implementato in seguito. 74 00:05:27,360 --> 00:05:31,190 In questo momento sappiamo che la promessa si risolverà sempre correttamente, 75 00:05:31,190 --> 00:05:33,665 quindi implementeremo il metodo then qui, 76 00:05:33,665 --> 00:05:36,645 e poi, all'interno del metodo then, 77 00:05:36,645 --> 00:05:46,650 riceverò l'oggetto piatti in arrivo quando la promessa si risolve. 78 00:05:46,650 --> 00:05:50,400 E quando questo è l'oggetto piatti entra come parametro, 79 00:05:50,400 --> 00:05:53,190 quindi vedi che sto scrivendo una funzione freccia qui, 80 00:05:53,190 --> 00:06:03,120 ho solo intenzione di ritagliarlo e includerlo proprio lì. 81 00:06:03,170 --> 00:06:09,510 Ecco a te. Questo è il modo in cui il componente può ora 82 00:06:09,510 --> 00:06:16,775 prendere possesso della promessa e quindi recuperare i risultati quando la promessa viene risolta. 83 00:06:16,775 --> 00:06:21,575 Puoi vedere che abbiamo il getDishService e quindi il metodo then 84 00:06:21,575 --> 00:06:26,560 cambia ad esso e per cui quando viene chiamato il then, 85 00:06:26,560 --> 00:06:28,880 quando la promessa si risolve dall'altra parte, 86 00:06:28,880 --> 00:06:33,635 i piatti ti verranno consegnati perché il metodo getDishes 87 00:06:33,635 --> 00:06:38,450 restituisce una promessa, ma il risultato sarà una matrice di piatti. 88 00:06:38,450 --> 00:06:42,320 Quella matrice di piatti arriva come parametro qui quindi sto scrivendo una funzione freccia 89 00:06:42,320 --> 00:06:46,880 qui dove sto assegnando che questi piatti ai piatti. 90 00:06:46,880 --> 00:06:49,880 Quindi, quando questa promessa si risolve, i piatti 91 00:06:49,880 --> 00:06:53,930 saranno assegnati a questi piatti. Questo è tutto. 92 00:06:53,930 --> 00:06:57,455 Ora il mio componente di menu è pronto per affrontare la promessa. 93 00:06:57,455 --> 00:07:01,715 Naturalmente, per gestire l'errore è anche necessario 94 00:07:01,715 --> 00:07:06,130 concatenare il metodo catch nel metodo getDises. 95 00:07:06,130 --> 00:07:08,390 Quindi, il then e il catch sono metodi che 96 00:07:08,390 --> 00:07:11,540 la promessa fornisce per te e quindi lo implementi e all'interno del 97 00:07:11,540 --> 00:07:16,790 quale fornisci la funzione che 98 00:07:16,790 --> 00:07:23,355 si occupa della situazione in cui la promessa si risolve o quando la promessa rifiuta con un errore. 99 00:07:23,355 --> 00:07:28,850 Allo stesso modo, dovremmo riconfigurare il metodo di dettaglio piatto 100 00:07:28,850 --> 00:07:33,890 e anche il componente home per affrontare il fatto che 101 00:07:33,890 --> 00:07:44,520 DishService sta ora fornendo promesse piuttosto che consegnare i valori immediatamente. 102 00:07:44,520 --> 00:07:46,470 Mentre ci siamo, 103 00:07:46,470 --> 00:07:51,305 potremmo anche riconfigurare sia il leader che il servizio di promozione anche. 104 00:07:51,305 --> 00:07:55,100 Quindi lo lascerò come un esercizio per voi da completare, 105 00:07:55,120 --> 00:07:59,930 aggiornando sia il servizio leader che il servizio di promozione per essere in grado di 106 00:07:59,930 --> 00:08:05,180 consegnare le corrispondenti promesse. 107 00:08:05,180 --> 00:08:09,379 Inoltre, di conseguenza, dovrai riconfigurare 108 00:08:09,379 --> 00:08:18,785 il codice script del tipo di componente nel componente about nel componente dettaglio piatto, 109 00:08:18,785 --> 00:08:23,360 nel componente home per affrontare il fatto che 110 00:08:23,360 --> 00:08:27,950 ora stai ricevendo promesse piuttosto che i risultati effettivi. 111 00:08:27,950 --> 00:08:34,005 Quindi vi lascerò completare quella parte invece di illustrare tutto ciò in dettaglio, 112 00:08:34,005 --> 00:08:37,620 vi ho mostrato un passo con la componente dettaglio piatto. 113 00:08:37,620 --> 00:08:42,380 Completare i passaggi sia con il leader che con il servizio di promozione, 114 00:08:42,380 --> 00:08:45,890 quindi configurare i componenti corrispondenti di conseguenza. 115 00:08:45,890 --> 00:08:50,275 Permettetemi di illustrarvi rapidamente gli aggiornamenti che dovete completare. 116 00:08:50,275 --> 00:08:56,365 Così come vedete il servizio leader che ho già aggiornato con la promessa. 117 00:08:56,365 --> 00:08:57,585 Come puoi vedere qui, 118 00:08:57,585 --> 00:09:00,410 tutti i metodi ora sono stati aggiornati per restituire 119 00:09:00,410 --> 00:09:04,800 le promesse proprio come abbiamo fatto con DishService. 120 00:09:04,800 --> 00:09:08,420 Allo stesso modo, i servizi di promozione anche aggiornato per 121 00:09:08,420 --> 00:09:12,660 restituire le promesse da tutti i metodi lì. 122 00:09:12,660 --> 00:09:16,560 Ora, andando al componente su, 123 00:09:16,560 --> 00:09:22,160 si vedrebbe che nel componente su anche abbiamo configurato per 124 00:09:22,160 --> 00:09:28,790 ricevere i valori all'interno del allora della promessa lì. 125 00:09:28,790 --> 00:09:33,560 Allo stesso modo, nella componente dettaglio piatto si noterà che ho 126 00:09:33,560 --> 00:09:39,765 riconfigurato questo per affrontare la promessa lì. 127 00:09:39,765 --> 00:09:43,495 Allo stesso modo, nel componente home, 128 00:09:43,495 --> 00:09:46,190 si noterà che all'interno del componente home 129 00:09:46,190 --> 00:09:51,740 tutti e tre i metodi qui: getFeaturedDish, 130 00:09:51,740 --> 00:09:54,650 FeaturedPromotion e FeaturedLeader sono stati aggiornati, 131 00:09:54,650 --> 00:09:59,330 con l'allora allegato a ciascuno di essi per gestire la promessa. 132 00:09:59,330 --> 00:10:06,355 Il codice è praticamente simile a quello che ho illustrato con il componente menu. 133 00:10:06,355 --> 00:10:08,570 Una volta completato questo, 134 00:10:08,570 --> 00:10:12,995 diamo uno sguardo rapido alla nostra applicazione. 135 00:10:12,995 --> 00:10:15,665 Andando alla nostra applicazione nel browser, 136 00:10:15,665 --> 00:10:18,870 non vedrai alcuna differenza nell'applicazione. 137 00:10:18,870 --> 00:10:21,409 Funziona esattamente allo stesso modo di prima, 138 00:10:21,409 --> 00:10:26,385 tranne che ora sta usando le promesse quando 139 00:10:26,385 --> 00:10:29,615 i servizi sono implementati e i tuoi componenti 140 00:10:29,615 --> 00:10:33,080 si occupano delle promesse quando vengono risolti. 141 00:10:33,080 --> 00:10:36,530 Quindi il componente del menu funziona correttamente e 142 00:10:36,530 --> 00:10:40,440 anche il componente dettaglio piatto funziona correttamente. 143 00:10:40,440 --> 00:10:43,150 Con questo, completiamo questo esercizio. 144 00:10:43,150 --> 00:10:49,130 In questo esercizio abbiamo visto come siamo stati in grado di aggiornare i nostri servizi per 145 00:10:49,130 --> 00:10:55,990 offrire promesse e abbiamo anche aggiornato i nostri componenti per essere in grado di gestire le promesse. 146 00:10:55,990 --> 00:10:58,710 Questo completa questo esercizio. 147 00:10:58,710 --> 00:11:06,300 Questo è un buon momento per fare un commit git con il messaggio «Prometti parte uno».