1
00:00:03,950 --> 00:00:07,125
Nell'esercizio precedente,

2
00:00:07,125 --> 00:00:13,625
abbiamo aggiornato i nostri servizi di applicazioni angolari per utilizzare le promesse

3
00:00:13,625 --> 00:00:15,960
e aggiornando anche i componenti per

4
00:00:15,960 --> 00:00:19,245
gestire le promesse restituite dai servizi.

5
00:00:19,245 --> 00:00:24,280
In questo esercizio, che è un'estensione dell'esercizio precedente,

6
00:00:24,280 --> 00:00:29,485
verrà simulato un ritardo di tempo per la promessa di risolvere.

7
00:00:29,485 --> 00:00:31,240
Nell' esercizio precedente,

8
00:00:31,240 --> 00:00:33,490
le promesse si stavano risolvendo immediatamente.

9
00:00:33,490 --> 00:00:35,540
Ma nella vita reale,

10
00:00:35,540 --> 00:00:42,934
quando si richiedono dati da un servizio e il servizio fornisce una promessa,

11
00:00:42,934 --> 00:00:44,540
il servizio, a sua volta,

12
00:00:44,540 --> 00:00:47,900
deve andare a recuperare i dati da un server back-end,

13
00:00:47,900 --> 00:00:49,295
e questo richiederà tempo.

14
00:00:49,295 --> 00:00:51,310
Quindi, affinché la promessa si risolva,

15
00:00:51,310 --> 00:00:53,740
ci sarà una certa quantità di ritardo.

16
00:00:53,740 --> 00:00:59,880
Ora, come affrontiamo questo ritardo di tempo sul nostro lato componente?

17
00:00:59,880 --> 00:01:04,040
Come teniamo l'utente informato sul fatto che c'è

18
00:01:04,040 --> 00:01:09,810
un ritardo temporale coinvolto prima che i dati possano essere recuperati e mostrati all'utente?

19
00:01:10,070 --> 00:01:14,490
Come affrontiamo il ritardo stesso?

20
00:01:14,490 --> 00:01:15,830
Ora, in questo esercizio,

21
00:01:15,830 --> 00:01:24,820
simulerò il ritardo di tempo utilizzando un metodo JavaScript all'interno dei miei servizi,

22
00:01:24,820 --> 00:01:34,190
e quindi aggiornerò anche i componenti per essere in grado di mostrare un messaggio all'utente utilizzando

23
00:01:34,190 --> 00:01:41,765
il componente spinner avanzamento materiale angolare per mostrare un disco rotante

24
00:01:41,765 --> 00:01:46,130
nella vista modello su tenere l'utente informato sul

25
00:01:46,130 --> 00:01:51,630
fatto che i dati vengono recuperati dal server,

26
00:01:51,630 --> 00:01:55,940
e eseguiremo il rendering nella vista non appena i dati diventano

27
00:01:55,940 --> 00:02:00,590
disponibili per il componente quando la promessa si risolve.

28
00:02:00,590 --> 00:02:04,680
Vediamo come possiamo farlo in questo esercizio.

29
00:02:04,680 --> 00:02:09,110
Di nuovo, tornando al mio servizio,

30
00:02:09,110 --> 00:02:11,990
qui ho il servizio piatto aperto qui.

31
00:02:11,990 --> 00:02:15,490
Invece di avere la promessa risolta immediatamente,

32
00:02:15,490 --> 00:02:18,620
ora faremo una promessa e poi lasceremo che

33
00:02:18,620 --> 00:02:22,500
la promessa si risolva dopo un breve periodo di tempo.

34
00:02:22,500 --> 00:02:26,510
Quindi, per fare ciò, questa promessa di risoluzione non funzionerà

35
00:02:26,510 --> 00:02:31,055
più come mostrato qui, quindi ho intenzione di cancellarlo.

36
00:02:31,055 --> 00:02:34,535
Invece, quando viene chiamato il mio metodo,

37
00:02:34,535 --> 00:02:38,915
il metodo restituirà una promessa creando una nuova promessa.

38
00:02:38,915 --> 00:02:42,310
Ricordi che quando hai creato la nuova promessa,

39
00:02:42,310 --> 00:02:47,060
all'interno della promessa avresti la funzione

40
00:02:47,060 --> 00:02:52,795
con risoluzione e rifiuto come i due parametri.

41
00:02:52,795 --> 00:02:56,080
Ora, ho intenzione di usare solo la parte risolvibile di esso.

42
00:02:56,080 --> 00:03:02,665
Quindi, implementerò la funzione all'interno della promessa usando solo una funzione freccia qui.

43
00:03:02,665 --> 00:03:04,690
Quindi, dirò risolvi,

44
00:03:04,690 --> 00:03:13,380
e simulerò un breve ritardo affinché questa risoluzione abbia luogo.

45
00:03:13,380 --> 00:03:17,340
Permettetemi di scrivere un commento.

46
00:03:17,440 --> 00:03:28,780
Simula la latenza del server con un ritardo di due secondi.

47
00:03:28,780 --> 00:03:31,410
Quindi, come simuliamo questo?

48
00:03:31,410 --> 00:03:37,380
Quindi, usiamo il metodo setTimeout

49
00:03:37,380 --> 00:03:43,900
che è disponibile in JavaScript.

50
00:03:43,900 --> 00:03:45,870
Quindi, per il metodo setTimeout,

51
00:03:45,870 --> 00:03:48,115
ancora una volta, implementerò una funzione freccia,

52
00:03:48,115 --> 00:03:52,625
il metodo setTimeout non ha alcun parametro di cui abbiamo bisogno lì.

53
00:03:52,625 --> 00:03:57,565
Quindi, quando questo setTimeout viene eseguito,

54
00:03:57,565 --> 00:04:04,245
allora risolverà la consegna dei PIATES.

55
00:04:04,245 --> 00:04:08,480
Quindi, lasciami tagliare questo PIATTI e poi incollarlo nei PIATTI.

56
00:04:08,480 --> 00:04:14,650
Quindi, vedi che questo risultato sta restituendo il risultato qui,

57
00:04:14,650 --> 00:04:22,370
e questo risultato verrà restituito dopo due secondi di ritardo qui.

58
00:04:24,880 --> 00:04:31,160
Con questo aggiornamento, la nostra promessa verrà risolta dopo due secondi.

59
00:04:31,160 --> 00:04:37,010
Quindi, il metodo setTimeout disponibile in JavaScript simula un breve ritardo.

60
00:04:37,010 --> 00:04:38,710
Quindi, come puoi vedere,

61
00:04:38,710 --> 00:04:44,345
simula il breve ritardo e prende una richiamata qui.

62
00:04:44,345 --> 00:04:46,280
Questo callback come puoi vedere, l'

63
00:04:46,280 --> 00:04:48,930
ho implementato come funzione freccia qui.

64
00:04:48,930 --> 00:04:51,730
Quindi, nessun parametro e poi quando questo si risolve,

65
00:04:51,730 --> 00:05:01,450
si risolverà restituendo i piatti e il ritardo per questo è di due secondi.

66
00:05:01,450 --> 00:05:04,185
Quindi, questa parte è la funzione,

67
00:05:04,185 --> 00:05:09,180
e questo è il ritardo che abbiamo qui.

68
00:05:09,180 --> 00:05:14,590
Quindi, ora, la mia promessa si risolverà dopo un ritardo di due secondi.

69
00:05:14,590 --> 00:05:19,870
Allo stesso modo, aggiorniamo i restanti due metodi qui.

70
00:05:20,720 --> 00:05:22,785
Quindi, per farlo,

71
00:05:22,785 --> 00:05:29,430
ho intenzione di copiare

72
00:05:29,430 --> 00:05:35,745
quella parte e poi semplicemente incollarla lì dentro,

73
00:05:35,745 --> 00:05:41,325
e si noterà che

74
00:05:41,325 --> 00:05:51,315
sarà e ho bisogno di dire 2000.

75
00:05:51,315 --> 00:05:56,390
Quindi, questo completa il metodo setTimeout lì.

76
00:05:56,730 --> 00:06:00,445
Ora, faremo

77
00:06:00,445 --> 00:06:09,705
seguire la parentesi di chiusura.

78
00:06:09,705 --> 00:06:16,725
Allo stesso modo, permettetemi di aggiornare anche l'ultimo metodo.

79
00:06:16,725 --> 00:06:20,340
Quindi, vedi che risolve i piatti,

80
00:06:20,340 --> 00:06:26,020
e poi dopo due secondi di ritardo,

81
00:06:29,270 --> 00:06:32,840
e chiudi il metodo a lì.

82
00:06:32,840 --> 00:06:36,965
Questo è tutto. Quindi, ora il mio servizio piatto è

83
00:06:36,965 --> 00:06:43,105
aggiornato per risolvere tutte le promesse dopo due secondi di ritardo.

84
00:06:43,105 --> 00:06:47,810
Ora, allo stesso modo, aggiorna il servizio leader e

85
00:06:47,810 --> 00:06:52,405
il servizio di promozione usando lo stesso schema che ti ho mostrato qui.

86
00:06:52,405 --> 00:06:57,890
La seconda parte della domanda è quella di mantenere in qualche modo l'utente informato sul

87
00:06:57,890 --> 00:07:03,260
fatto che c'è un ritardo di tempo coinvolto nell'ottenere i risultati,

88
00:07:03,260 --> 00:07:07,700
e quindi la vista si aggiornerà non appena verranno ottenuti i risultati.

89
00:07:07,700 --> 00:07:10,690
Hai visto questo tipo di comportamento in molte applicazioni,

90
00:07:10,690 --> 00:07:18,020
comprese le applicazioni mobili in cui si avrebbe uno spinner mostrato sullo schermo per mantenere

91
00:07:18,020 --> 00:07:21,620
l'utente informato sul fatto che qualcosa viene caricato da dietro

92
00:07:21,620 --> 00:07:25,445
le quinte e quando i risultati diventano disponibili,

93
00:07:25,445 --> 00:07:27,275
la vista essere aggiornato.

94
00:07:27,275 --> 00:07:33,750
Quindi, useremo un approccio simile all'interno dei nostri componenti.

95
00:07:33,750 --> 00:07:35,530
Per aiutarci con questo,

96
00:07:35,530 --> 00:07:40,585
useremo il componente spinner progresso da materiale angolare.

97
00:07:40,585 --> 00:07:43,330
Quindi, per utilizzare il componente spinner di avanzamento,

98
00:07:43,330 --> 00:07:47,625
andiamo prima al

99
00:07:47,625 --> 00:07:52,725
file dell'app module.ts e quindi importare il modulo di avanzamento spinner lì.

100
00:07:52,725 --> 00:07:55,180
Quindi, andando a app module.ts.

101
00:07:55,180 --> 00:08:01,595
Prima andremo qui per importare

102
00:08:01,595 --> 00:08:12,150
il MatProgressSpinnerModule da angolare/materiale/progresse-spinner.

103
00:08:17,560 --> 00:08:23,025
Una volta che abbiamo importato questo nel file,

104
00:08:23,025 --> 00:08:28,415
allora andremo nel decoratore del modulo ng nelle importazioni,

105
00:08:28,415 --> 00:08:34,290
e quindi aggiungere il MatProgressSpinnerModule in quello.

106
00:08:34,290 --> 00:08:35,650
Una volta completato questo,

107
00:08:35,650 --> 00:08:42,075
allora possiamo aggiornare i componenti per fare uso dello spinner di avanzamento.

108
00:08:42,075 --> 00:08:45,970
Quindi qui, vi mostrerò un esempio

109
00:08:45,970 --> 00:08:51,555
illustrando come possiamo aggiornare il componente menu per mostrare queste informazioni.

110
00:08:51,555 --> 00:08:55,505
Quindi, vai nel file di layout dei componenti del menu.

111
00:08:55,505 --> 00:09:02,425
Qui, vediamo che stiamo mostrando il menu utilizzando la lista griglia qui.

112
00:09:02,425 --> 00:09:06,880
Quindi, quello che faremo è, per questo div,

113
00:09:06,880 --> 00:09:14,060
userò la direttiva NGif e dirò che questo dovrebbe essere visualizzato.

114
00:09:14,060 --> 00:09:18,465
Il menu dovrebbe essere visualizzato solo quando i piatti non sono nulli.

115
00:09:18,465 --> 00:09:23,670
Quindi inizialmente, nel file di script della scheda dei componenti,

116
00:09:23,670 --> 00:09:27,325
vedrai che quando vai al file di script della scheda dei componenti vedrai che

117
00:09:27,325 --> 00:09:32,250
i tuoi piatti sono attualmente solo un oggetto indefinito qui,

118
00:09:32,250 --> 00:09:39,255
e che i piatti verranno assegnati al valore dei piatti solo quando i problemi si risolvono.

119
00:09:39,255 --> 00:09:40,995
Quindi, fino a quel momento,

120
00:09:40,995 --> 00:09:43,145
i piatti saranno un valore indefinito.

121
00:09:43,145 --> 00:09:45,665
Quindi, possiamo approfittare di questo fatto,

122
00:09:45,665 --> 00:09:49,270
e quindi riprogettare il nostro modello in modo tale che,

123
00:09:49,270 --> 00:09:58,955
diremo mostrare questo div solo se i piatti non sono un oggetto indefinito o non nullo.

124
00:09:58,955 --> 00:10:01,970
Quando è sconosciuto,

125
00:10:01,970 --> 00:10:10,210
userò un secondo div qui con l'attributo nascosto associato ad esso.

126
00:10:10,210 --> 00:10:14,310
Quindi, hai visto nascosto essere usato prima.

127
00:10:14,310 --> 00:10:18,685
Quindi, ho intenzione di usarlo per definire lo stelo.

128
00:10:18,685 --> 00:10:23,350
Quindi, ciò che significa è che se i piatti non sono nulli,

129
00:10:23,350 --> 00:10:25,145
allora questo div sarà nascosto.

130
00:10:25,145 --> 00:10:26,865
Se i piatti sono nulli,

131
00:10:26,865 --> 00:10:28,405
verrà mostrato questo div.

132
00:10:28,405 --> 00:10:31,435
Quindi, ora vedi che hai due div qui.

133
00:10:31,435 --> 00:10:39,840
Il primo verrà mostrato se i piatti non sono array di piatti nulli.

134
00:10:39,840 --> 00:10:42,365
Altrimenti, verrà mostrata la seconda parte.

135
00:10:42,365 --> 00:10:46,120
Quindi, con questo piccolo cambiamento al mio modello,

136
00:10:46,120 --> 00:10:54,745
sono in grado di nascondere il menu fino al punto in cui l'array di piatti diventa disponibile per me,

137
00:10:54,745 --> 00:10:57,350
e quando l'array di piatti diventa disponibile,

138
00:10:57,350 --> 00:10:58,660
allora mostrerò il menu.

139
00:10:58,660 --> 00:11:06,000
Fino a quel momento, mostrerò un mat-spinner.

140
00:11:06,000 --> 00:11:11,295
Che è spinner progresso indeterminato

141
00:11:11,295 --> 00:11:14,635
che è disponibile come componente materiale angolare.

142
00:11:14,635 --> 00:11:20,565
Quindi, questo mostrerà come un cerchio rotante a mio avviso,

143
00:11:20,565 --> 00:11:27,185
per questo componente del menu fino al punto in cui si ottengono i risultati,

144
00:11:27,185 --> 00:11:29,605
quando i problemi si risolvono.

145
00:11:29,605 --> 00:11:35,330
Inoltre, userò anche h4, e all'interno di h4,

146
00:11:35,330 --> 00:11:43,680
dirò il caricamento, per favore aspetta.

147
00:11:43,680 --> 00:11:48,205
Quindi, quello che succede è che quando i piatti non sono ancora risolti,

148
00:11:48,205 --> 00:11:51,575
lo spinner e questo messaggio verranno visualizzati sullo schermo.

149
00:11:51,575 --> 00:11:55,210
Nel momento in cui i piatti diventano disponibili quando i risultati promessi,

150
00:11:55,210 --> 00:11:58,015
il menu verrà visualizzato sullo schermo.

151
00:11:58,015 --> 00:12:03,685
Ora, faremo aggiornamenti simili sul componente,

152
00:12:03,685 --> 00:12:07,985
il componente di casa, e il componente di dettaglio piatto anche.

153
00:12:07,985 --> 00:12:13,135
Di conseguenza, aggiorneremo il servizio leader

154
00:12:13,135 --> 00:12:18,570
e il servizio di promozione anche per simulare il ritardo temporale.

155
00:12:18,570 --> 00:12:22,000
Quindi, usando il modello che ti ho appena illustrato,

156
00:12:22,000 --> 00:12:26,660
vai avanti e aggiorna i servizi e anche i modelli corrispondenti,

157
00:12:26,660 --> 00:12:31,135
e vedremo il risultato dopo aver terminato l'aggiornamento.

158
00:12:31,135 --> 00:12:34,710
Dopo aver completato gli aggiornamenti di tutti i servizi e

159
00:12:34,710 --> 00:12:38,255
dei modelli corrispondenti per i componenti,

160
00:12:38,255 --> 00:12:43,565
permettetemi di eseguire rapidamente i file aggiornati qui.

161
00:12:43,565 --> 00:12:45,290
Quindi, questo e' il servizio leader.

162
00:12:45,290 --> 00:12:47,320
Quindi, puoi vedere che nel servizio leader,

163
00:12:47,320 --> 00:12:54,675
ho aggiornato GetLeaders per utilizzare setTimeout esattamente come abbiamo fatto con i piatti,

164
00:12:54,675 --> 00:12:58,880
e anche GetLeader e GetFeaturedLeader.

165
00:12:58,880 --> 00:13:01,650
Allo stesso modo, nel servizio di promozione,

166
00:13:01,650 --> 00:13:08,190
abbiamo aggiornato anche l'ID GetPromotions GetPromotion e GetFeaturedPromotion.

167
00:13:08,190 --> 00:13:11,545
Pertanto, i tre servizi sono ora aggiornati

168
00:13:11,545 --> 00:13:15,955
per causare un ritardo di tempo prima che restituiscano il risultato.

169
00:13:15,955 --> 00:13:18,325
Ora, in termini di modelli,

170
00:13:18,325 --> 00:13:22,150
abbiamo già aggiornato il modello menu.component.

171
00:13:22,150 --> 00:13:26,140
Diamo un'occhiata ai modelli casa.components.

172
00:13:26,140 --> 00:13:27,985
Quindi, all'interno della home.component,

173
00:13:27,985 --> 00:13:31,100
ti rendi conto che quando abbiamo progettato la home.component,

174
00:13:31,100 --> 00:13:36,420
avevamo già configurato le schede con il piatto stella NGif.

175
00:13:36,420 --> 00:13:38,320
Quindi, tutto quello che dobbiamo fare è,

176
00:13:38,320 --> 00:13:40,630
qui sotto aggiungiamo un div con

177
00:13:40,630 --> 00:13:47,490
il nascosto e piatto qui ma lo spinner proprio come abbiamo fatto con il menu.component.

178
00:13:47,490 --> 00:13:53,265
Allo stesso modo, per la promozione la mat-card ha già il NGIF in atto,

179
00:13:53,265 --> 00:14:00,530
quindi abbiamo solo bisogno di aggiungere questo div aggiuntivo qui con la promozione nascosta lì,

180
00:14:00,530 --> 00:14:05,015
e anche per il leader qui sotto.

181
00:14:05,015 --> 00:14:09,220
Allo stesso modo, andando al componente dettaglio piatto.

182
00:14:09,220 --> 00:14:10,810
Nel componente dettaglio piatto,

183
00:14:10,810 --> 00:14:17,105
abbiamo già avuto la lista con il piatto NGIF per i commenti.

184
00:14:17,105 --> 00:14:23,250
Inoltre, il piatto NGIF per la carta che visualizza i dettagli del piatto.

185
00:14:23,250 --> 00:14:30,440
Quindi, tutto ciò che dobbiamo fare è aggiungere in questo nuovo div con il piatto nascosto qui

186
00:14:30,440 --> 00:14:32,970
e lo spinner div in posizione.

187
00:14:32,970 --> 00:14:36,295
Allo stesso modo, nel componente su,

188
00:14:36,295 --> 00:14:39,015
quando si entra nel componente su,

189
00:14:39,015 --> 00:14:42,515
si vedrebbe che abbiamo avuto i leader aziendali qui,

190
00:14:42,515 --> 00:14:47,330
e abbiamo già avuto la lista con la stella NGIF con i leader.

191
00:14:47,330 --> 00:14:50,950
Quindi, tutto ciò che dobbiamo fare è aggiungere nel div con

192
00:14:50,950 --> 00:14:55,715
nascosti e leader qui con uno spinner in posizione. Questo è tutto.

193
00:14:55,715 --> 00:14:58,155
La nostra applicazione è ora aggiornata.

194
00:14:58,155 --> 00:15:04,665
Diamo un'occhiata all'applicazione aggiornata nel browser successivo.

195
00:15:04,665 --> 00:15:06,530
Andando al browser,

196
00:15:06,530 --> 00:15:10,275
vedrai che quando provi a caricare nel componente di casa,

197
00:15:10,275 --> 00:15:14,520
c'è un breve periodo di tempo in cui vedi lo spinner sullo

198
00:15:14,520 --> 00:15:18,730
schermo prima che le carte vengano caricate.

199
00:15:18,730 --> 00:15:21,520
Allo stesso modo, quando vai al menu.component,

200
00:15:21,520 --> 00:15:24,765
vedresti lo spinner sul lato sinistro per

201
00:15:24,765 --> 00:15:28,995
due secondi prima che il menu effettivo venga aggiornato,

202
00:15:28,995 --> 00:15:33,395
e quando vai a un singolo piatto vedi anche che

203
00:15:33,395 --> 00:15:38,505
lo spinner sullo schermo prima che i dettagli del piatto vengano renderizzati,

204
00:15:38,505 --> 00:15:42,500
e nel su componente anche allo stesso modo, si vedrà che,

205
00:15:42,500 --> 00:15:50,400
si avrà il cerchio di rotazione lì prima che le informazioni del leader vengano aggiornate.

206
00:15:50,400 --> 00:15:53,520
Ogni volta che passiamo a uno di questi,

207
00:15:53,520 --> 00:16:02,190
si vedrebbe un breve ritardo simile prima che l'infiammazione venga aggiornata sullo schermo.

208
00:16:04,030 --> 00:16:12,860
Quindi, con questo vedi come puoi affrontare il ritardo nell'ottenere i risultati,

209
00:16:12,860 --> 00:16:18,874
o ritardare la risoluzione della promessa dal lato del servizio all'interno del tuo componente

210
00:16:18,874 --> 00:16:21,830
e mantenere l'utente informato sul fatto che c'è

211
00:16:21,830 --> 00:16:25,495
un breve ritardo prima che lo schermo venga aggiornato.

212
00:16:25,495 --> 00:16:28,260
Questo completa questo esercizio.

213
00:16:28,260 --> 00:16:35,420
In questo esercizio, abbiamo visto come possiamo simulare un breve ritardo con le nostre promesse.

214
00:16:35,420 --> 00:16:38,575
Come risolvere dai servizi,

215
00:16:38,575 --> 00:16:45,185
e abbiamo anche visto come mantenere l'utente informato utilizzando i

216
00:16:45,185 --> 00:16:49,460
componenti del materiale angolare spinner MD da mostrare sullo schermo per

217
00:16:49,460 --> 00:16:53,900
la durata quando i risultati non sono ancora disponibili,

218
00:16:53,900 --> 00:16:59,025
cioè per la durata fino a quando la promessa viene risolta.

219
00:16:59,025 --> 00:17:01,470
Questo completa questo esercizio.

220
00:17:01,470 --> 00:17:07,770
Questo è un buon momento per fare un commit git con il messaggio promessa Parte due.