1 00:00:03,950 --> 00:00:07,125 Dans l'exercice précédent, 2 00:00:07,125 --> 00:00:13,625 nous avons mis à jour nos services d'applications Angular pour utiliser des promesses, 3 00:00:13,625 --> 00:00:15,960 et aussi mettre à jour les composants pour 4 00:00:15,960 --> 00:00:19,245 traiter les promesses qui sont retournées par les services. 5 00:00:19,245 --> 00:00:24,280 Dans cet exercice, qui est une extension de l'exercice précédent, 6 00:00:24,280 --> 00:00:29,485 , nous allons simuler un délai pour la résolution de la promesse. 7 00:00:29,485 --> 00:00:31,240 Dans l'exercice précédent, 8 00:00:31,240 --> 00:00:33,490 les promesses se sont résolues immédiatement. 9 00:00:33,490 --> 00:00:35,540 Mais dans la vraie vie, 10 00:00:35,540 --> 00:00:42,934 quand vous demandez des données à un service et que le service offre une promesse, 11 00:00:42,934 --> 00:00:44,540 le service, à son tour, 12 00:00:44,540 --> 00:00:47,900 doit aller chercher les données à partir d'un serveur back-end, 13 00:00:47,900 --> 00:00:49,295 et cela prendra du temps. 14 00:00:49,295 --> 00:00:51,310 Donc, pour la promesse de résoudre, 15 00:00:51,310 --> 00:00:53,740 il y aura un certain délai. 16 00:00:53,740 --> 00:00:59,880 Maintenant, comment pouvons-nous faire face à ce retard de temps du côté des composants ? 17 00:00:59,880 --> 00:01:04,040 Comment tenir l'utilisateur informé du fait qu'il y a 18 00:01:04,040 --> 00:01:09,810 un délai avant que les données puissent être récupérées et affichées à l'utilisateur ? 19 00:01:10,070 --> 00:01:14,490 Comment faire face au retard lui-même ? 20 00:01:14,490 --> 00:01:15,830 Maintenant, dans cet exercice, 21 00:01:15,830 --> 00:01:24,820 , je vais simuler le délai de temps en utilisant une méthode JavaScript dans mes services, 22 00:01:24,820 --> 00:01:34,190 et ensuite mettre à jour les composants pour être en mesure d'afficher un message à l'utilisateur en utilisant 23 00:01:34,190 --> 00:01:41,765 le composant spinner de progression de matériau angulaire pour afficher un disque de rotation dans 24 00:01:41,765 --> 00:01:46,130 le modèle pour tenir l'utilisateur informé de 25 00:01:46,130 --> 00:01:51,630 du fait que les données sont extraites du serveur, 26 00:01:51,630 --> 00:01:55,940 et nous rendrons dans la vue dès que les données deviennent 27 00:01:55,940 --> 00:02:00,590 disponibles pour le composant lorsque la promesse sera résolue. 28 00:02:00,590 --> 00:02:04,680 Voyons comment nous pouvons le faire dans cet exercice. 29 00:02:04,680 --> 00:02:09,110 Encore une fois, pour revenir à mon service, 30 00:02:09,110 --> 00:02:11,990 ici, j'ai le service de vaisselle ouvert ici. 31 00:02:11,990 --> 00:02:15,490 Au lieu d'avoir la promesse résolue immédiatement, 32 00:02:15,490 --> 00:02:18,620 , nous allons maintenant donner une promesse et ensuite laisser 33 00:02:18,620 --> 00:02:22,500 la promesse se résoudre après un court laps de temps. 34 00:02:22,500 --> 00:02:26,510 Donc, pour ce faire, cette résolution de promesse ne fonctionnera plus 35 00:02:26,510 --> 00:02:31,055 comme indiqué ici donc je vais supprimer cela. 36 00:02:31,055 --> 00:02:34,535 Au lieu de cela, lorsque ma méthode est appelée, 37 00:02:34,535 --> 00:02:38,915 la méthode retournera une promesse en créant une nouvelle promesse. 38 00:02:38,915 --> 00:02:42,310 Vous vous rappelez que lorsque vous avez créé la nouvelle promesse, 39 00:02:42,310 --> 00:02:47,060 à l'intérieur de la promesse, vous auriez la fonction 40 00:02:47,060 --> 00:02:52,795 avec résolution et rejet comme les deux paramètres. 41 00:02:52,795 --> 00:02:56,080 Maintenant, je ne vais utiliser que la partie résolue de celui-ci. 42 00:02:56,080 --> 00:03:02,665 Donc, je vais implémenter la fonction dans la promesse juste en utilisant une fonction flèche ici. 43 00:03:02,665 --> 00:03:04,690 Donc, je dirai résoudre, 44 00:03:04,690 --> 00:03:13,380 et je simulerai un court délai pour que cette résolution ait lieu. 45 00:03:13,380 --> 00:03:17,340 Laissez-moi écrire un commentaire. 46 00:03:17,440 --> 00:03:28,780 Simuler la latence du serveur avec un délai de deux secondes. 47 00:03:28,780 --> 00:03:31,410 Alors, comment simuler cela ? 48 00:03:31,410 --> 00:03:37,380 Donc, nous utilisons la méthode setTimeout 49 00:03:37,380 --> 00:03:43,900 qui est disponible en JavaScript. 50 00:03:43,900 --> 00:03:45,870 Donc, pour la méthode setTimeout, 51 00:03:45,870 --> 00:03:48,115 encore une fois, je vais implémenter une fonction de flèche, 52 00:03:48,115 --> 00:03:52,625 la méthode setTimeout n'a pas de paramètres dont nous avons besoin là-bas. 53 00:03:52,625 --> 00:03:57,565 Donc, quand ce setTimeout s'exécute, 54 00:03:57,565 --> 00:04:04,245 alors il résoudra la livraison des plats. 55 00:04:04,245 --> 00:04:08,480 Alors, laissez-moi couper ces plats et ensuite les coller dans les plats. 56 00:04:08,480 --> 00:04:14,650 Donc, vous voyez que ce résultat retourne maintenant le résultat ici, 57 00:04:14,650 --> 00:04:22,370 et ce résultat sera retourné après deux secondes de retard ici. 58 00:04:24,880 --> 00:04:31,160 Avec cette mise à jour, notre promesse sera résolue au bout de deux secondes. 59 00:04:31,160 --> 00:04:37,010 Donc, la méthode setTimeout disponible en JavaScript simule un court délai. 60 00:04:37,010 --> 00:04:38,710 Donc, comme vous pouvez le voir, 61 00:04:38,710 --> 00:04:44,345 il simule le court délai et prend un rappel ici. 62 00:04:44,345 --> 00:04:46,280 Ce rappel comme vous pouvez le voir, 63 00:04:46,280 --> 00:04:48,930 Je l'ai implémenté comme une fonction de flèche ici. 64 00:04:48,930 --> 00:04:51,730 Donc, pas de paramètres et puis quand cela se résout, 65 00:04:51,730 --> 00:05:01,450 il va résoudre le retour des plats et le délai pour cela est de deux secondes. 66 00:05:01,450 --> 00:05:04,185 Donc, cette partie est la fonction, 67 00:05:04,185 --> 00:05:09,180 et c'est le délai que nous avons ici. 68 00:05:09,180 --> 00:05:14,590 Donc, maintenant, ma promesse va se résoudre après un retard de deux secondes. 69 00:05:14,590 --> 00:05:19,870 De même, mettons à jour les deux méthodes restantes ici. 70 00:05:20,720 --> 00:05:22,785 Donc, pour ce faire, 71 00:05:22,785 --> 00:05:29,430 Je vais juste copier 72 00:05:29,430 --> 00:05:35,745 cette partie et ensuite simplement coller ça là-dedans, 73 00:05:35,745 --> 00:05:41,325 et vous remarquerez que cette 74 00:05:41,325 --> 00:05:51,315 volonté et je dois dire 2000. 75 00:05:51,315 --> 00:05:56,390 Donc, cela complète la méthode setTimeout là. 76 00:05:56,730 --> 00:06:00,445 Maintenant, nous aurons 77 00:06:00,445 --> 00:06:09,705 la parenthèse de clôture suivie. 78 00:06:09,705 --> 00:06:16,725 De même, permettez-moi de mettre à jour la dernière méthode aussi. 79 00:06:16,725 --> 00:06:20,340 Donc, vous voyez qu'il résout les plats, 80 00:06:20,340 --> 00:06:26,020 et puis après deux secondes de retard, 81 00:06:29,270 --> 00:06:32,840 et fermez la méthode à là. 82 00:06:32,840 --> 00:06:36,965 C'est ça. Donc, maintenant mon service de plat est 83 00:06:36,965 --> 00:06:43,105 mis à jour pour résoudre toutes les promesses après deux secondes de retard. 84 00:06:43,105 --> 00:06:47,810 Maintenant, de même, mettez à jour le service leader et 85 00:06:47,810 --> 00:06:52,405 le service de promotion en utilisant le même modèle que je vous ai montré ici. 86 00:06:52,405 --> 00:06:57,890 La deuxième partie de la question est de tenir l'utilisateur informé de 87 00:06:57,890 --> 00:07:03,260 du fait qu'il y a un retard dans l'obtention des résultats, 88 00:07:03,260 --> 00:07:07,700 et donc la vue sera mise à jour dès que les résultats seront obtenus. 89 00:07:07,700 --> 00:07:10,690 Vous avez vu ce genre de comportement dans de nombreuses applications, 90 00:07:10,690 --> 00:07:18,020 y compris les applications mobiles où vous auriez un spinner affiché à l'écran pour garder 91 00:07:18,020 --> 00:07:21,620 l'utilisateur informé du fait que quelque chose est chargé de derrière 92 00:07:21,620 --> 00:07:25,445 les coulisses et lorsque les résultats deviennent disponibles, 93 00:07:25,445 --> 00:07:27,275 la vue sera mis à jour. 94 00:07:27,275 --> 00:07:33,750 Donc, nous allons utiliser une approche similaire dans nos composants. 95 00:07:33,750 --> 00:07:35,530 Pour nous aider avec cela, 96 00:07:35,530 --> 00:07:40,585 , nous allons utiliser le composant spinner de progression de Angular Material. 97 00:07:40,585 --> 00:07:43,330 Donc, pour utiliser le composant de spinner de progression, 98 00:07:43,330 --> 00:07:47,625 allons d'abord dans le fichier app 99 00:07:47,625 --> 00:07:52,725 module.ts, puis importez le module de spinner de progression là-dedans. 100 00:07:52,725 --> 00:07:55,180 Donc, aller à app module.ts. 101 00:07:55,180 --> 00:08:01,595 Nous allons d'abord monter ici pour importer 102 00:08:01,595 --> 00:08:12,150 le MatProgressSpinnerModule de angulaire/material/progress-spinner. 103 00:08:17,560 --> 00:08:23,025 Une fois que nous avons importé ceci dans le fichier, 104 00:08:23,025 --> 00:08:28,415 alors nous irons dans le décorateur du module ng dans les importations, 105 00:08:28,415 --> 00:08:34,290 et ensuite ajouter le MatProgressSpinnerModule dans cela. 106 00:08:34,290 --> 00:08:35,650 Une fois que nous avons terminé cela, 107 00:08:35,650 --> 00:08:42,075 alors nous pouvons mettre à jour les composants pour utiliser le spinner de progression. 108 00:08:42,075 --> 00:08:45,970 Donc ici, je vais vous montrer un exemple de 109 00:08:45,970 --> 00:08:51,555 illustrant comment nous pouvons mettre à jour le composant de menu pour montrer cette information. 110 00:08:51,555 --> 00:08:55,505 Alors, allez dans le fichier de mise en page des composants du menu. 111 00:08:55,505 --> 00:09:02,425 Ici, nous voyons que nous montrons le menu en utilisant la liste de grille ici. 112 00:09:02,425 --> 00:09:06,880 Donc, ce que nous allons faire est, pour ce div, 113 00:09:06,880 --> 00:09:14,060 , je vais utiliser la directive NGiF et dire que cela devrait être affiché. 114 00:09:14,060 --> 00:09:18,465 Le menu ne doit être affiché que lorsque la vaisselle n'est pas nulle. 115 00:09:18,465 --> 00:09:23,670 Donc, d'abord, dans votre fichier de script d'onglet composants, 116 00:09:23,670 --> 00:09:27,325 , vous verrez que lorsque vous allez dans le fichier de script d'onglet composants, vous verrez que 117 00:09:27,325 --> 00:09:32,250 vos plats n'est actuellement qu'un objet indéfini ici, 118 00:09:32,250 --> 00:09:39,255 et que les plats ne seront affectés à la valeur de la vaisselle que lorsque les problèmes seront résolus. 119 00:09:39,255 --> 00:09:40,995 Donc, jusqu'à ce point, 120 00:09:40,995 --> 00:09:43,145 les plats seront une valeur indéfinie. 121 00:09:43,145 --> 00:09:45,665 Donc, nous pouvons profiter de ce fait, 122 00:09:45,665 --> 00:09:49,270 et puis reconcevoir notre modèle de telle sorte que, 123 00:09:49,270 --> 00:09:58,955 nous dirons montrer cette div seulement si la vaisselle n'est pas un objet indéfini ou non nul. 124 00:09:58,955 --> 00:10:01,970 Quand c'est inconnu, 125 00:10:01,970 --> 00:10:10,210 alors j'utiliserai un second div ici avec l'attribut caché qui lui est associé. 126 00:10:10,210 --> 00:10:14,310 Donc, vous avez vu caché être utilisé auparavant. 127 00:10:14,310 --> 00:10:18,685 Donc, je vais l'utiliser pour définir la tige. 128 00:10:18,685 --> 00:10:23,350 Donc, ce que cela signifie est que si la vaisselle n'est pas nulle, 129 00:10:23,350 --> 00:10:25,145 alors cette div sera cachée. 130 00:10:25,145 --> 00:10:26,865 Si la vaisselle est nulle, 131 00:10:26,865 --> 00:10:28,405 alors cette div sera affichée. 132 00:10:28,405 --> 00:10:31,435 Donc, maintenant vous voyez que vous avez deux divs ici. 133 00:10:31,435 --> 00:10:39,840 Le premier sera montré si la vaisselle n'est pas un tableau de plat nul. 134 00:10:39,840 --> 00:10:42,365 Sinon, la deuxième partie sera affichée. 135 00:10:42,365 --> 00:10:46,120 Donc, avec ce petit changement de mon modèle, 136 00:10:46,120 --> 00:10:54,745 je suis capable de cacher le menu jusqu'à ce que le tableau de plats devienne disponible pour moi, 137 00:10:54,745 --> 00:10:57,350 et quand le tableau de plats devient disponible, 138 00:10:57,350 --> 00:10:58,660 alors je vais montrer le menu. 139 00:10:58,660 --> 00:11:06,000 Jusqu'à ce point, je vais montrer un mat-spinner. 140 00:11:06,000 --> 00:11:11,295 Qui est le spinner de progression indéterminée 141 00:11:11,295 --> 00:11:14,635 qui est disponible en tant que composant de matériau angulaire. 142 00:11:14,635 --> 00:11:20,565 Donc, cela s'affichera comme un cercle tournant à mon avis, 143 00:11:20,565 --> 00:11:27,185 pour ce composant de menu jusqu'au point où les résultats sont obtenus, 144 00:11:27,185 --> 00:11:29,605 lorsque les problèmes se résolvent. 145 00:11:29,605 --> 00:11:35,330 De plus, je vais également utiliser h4, et dans le h4, 146 00:11:35,330 --> 00:11:43,680 je dirai chargement, s'il vous plaît patienter. 147 00:11:43,680 --> 00:11:48,205 Donc, ce qui se passe est que lorsque la vaisselle n'est pas encore résolue, 148 00:11:48,205 --> 00:11:51,575 le spinner et ce message seront affichés à l'écran. 149 00:11:51,575 --> 00:11:55,210 Le moment où les plats deviennent disponibles lorsque les résultats promis, 150 00:11:55,210 --> 00:11:58,015 alors le menu sera affiché sur l'écran. 151 00:11:58,015 --> 00:12:03,685 Maintenant, nous allons faire des mises à jour similaires sur le composant, 152 00:12:03,685 --> 00:12:07,985 le composant home, et le composant de détail plat aussi. 153 00:12:07,985 --> 00:12:13,135 En conséquence, nous mettrons à jour le service leader, 154 00:12:13,135 --> 00:12:18,570 et le service de promotion également pour simuler le délai. 155 00:12:18,570 --> 00:12:22,000 Donc, en utilisant le modèle que je viens de vous illustrer, 156 00:12:22,000 --> 00:12:26,660 allez-y et mettez à jour les services et aussi les modèles correspondants, 157 00:12:26,660 --> 00:12:31,135 et nous verrons le résultat une fois la mise à jour terminée. 158 00:12:31,135 --> 00:12:34,710 Après avoir terminé les mises à jour de tous les services et 159 00:12:34,710 --> 00:12:38,255 les modèles correspondants pour les composants, 160 00:12:38,255 --> 00:12:43,565 laissez-moi vous parcourir rapidement les fichiers mis à jour ici. 161 00:12:43,565 --> 00:12:45,290 Donc, c'est le service de leader. 162 00:12:45,290 --> 00:12:47,320 Donc, vous pouvez voir que dans le service leader, 163 00:12:47,320 --> 00:12:54,675 J'ai mis à jour les GetLeaders pour utiliser le setTimeout exactement comme nous l'avons fait avec les plats, 164 00:12:54,675 --> 00:12:58,880 et le GetLeader et le GetFeaturedLeader aussi. 165 00:12:58,880 --> 00:13:01,650 De même, dans le service de promotion, 166 00:13:01,650 --> 00:13:08,190 , nous avons mis à jour l'identifiant GetPromotions GetPromotion et GetFeaturedPromotion également. 167 00:13:08,190 --> 00:13:11,545 Ainsi, les trois services sont maintenant mis à jour 168 00:13:11,545 --> 00:13:15,955 pour provoquer un délai avant qu'ils ne retournent le résultat. 169 00:13:15,955 --> 00:13:18,325 Maintenant, en termes de templates, 170 00:13:18,325 --> 00:13:22,150 nous avons déjà mis à jour le template menu.component. 171 00:13:22,150 --> 00:13:26,140 Regardons les modèles home.components. 172 00:13:26,140 --> 00:13:27,985 Donc, dans le home e.component, 173 00:13:27,985 --> 00:13:31,100 vous vous rendez compte que lorsque nous avons conçu le home e.component, 174 00:13:31,100 --> 00:13:36,420 nous avions déjà configuré les cartes avec le plat étoile NGif. 175 00:13:36,420 --> 00:13:38,320 Donc, tout ce que nous devons faire est, 176 00:13:38,320 --> 00:13:40,630 ci-dessous, nous ajoutons un div avec 177 00:13:40,630 --> 00:13:47,490 le caché et le plat ici mais le spinner comme nous l'avons fait avec le menu.component. 178 00:13:47,490 --> 00:13:53,265 De même, pour la promotion, le mat-card a déjà le NGiF en place, 179 00:13:53,265 --> 00:14:00,530 donc il nous suffit d'ajouter cette div supplémentaire ici avec la promotion cachée là-bas, 180 00:14:00,530 --> 00:14:05,015 et aussi pour le leader ici ci-dessous. 181 00:14:05,015 --> 00:14:09,220 De même, aller à la composante détail du plat. 182 00:14:09,220 --> 00:14:10,810 Dans le composant de détail du plat, 183 00:14:10,810 --> 00:14:17,105 nous avions déjà la liste avec le plat NGiF pour les commentaires. 184 00:14:17,105 --> 00:14:23,250 Aussi, le plat NGiF pour la carte qui affiche les détails du plat. 185 00:14:23,250 --> 00:14:30,440 Donc, tout ce que nous devons faire est d'ajouter dans cette nouvelle div avec le plat caché ici, 186 00:14:30,440 --> 00:14:32,970 et le spinner div en place. 187 00:14:32,970 --> 00:14:36,295 De même, dans le composant about, 188 00:14:36,295 --> 00:14:39,015 quand vous allez dans le composant about, 189 00:14:39,015 --> 00:14:42,515 vous verrez que nous avions les dirigeants d'entreprise ici, 190 00:14:42,515 --> 00:14:47,330 et que nous avions déjà la liste avec la star NGiF avec les leaders. 191 00:14:47,330 --> 00:14:50,950 Donc, tout ce que nous devons faire est d'ajouter dans la div avec 192 00:14:50,950 --> 00:14:55,715 caché et leaders ici avec un spinner en place. C'est ça. 193 00:14:55,715 --> 00:14:58,155 Notre application est maintenant mise à jour. 194 00:14:58,155 --> 00:15:04,665 Jetons un coup d'oeil à l'application mise à jour dans le navigateur suivant. 195 00:15:04,665 --> 00:15:06,530 En allant dans le navigateur, 196 00:15:06,530 --> 00:15:10,275 vous verrez que lorsque vous essayez de charger dans le composant home, 197 00:15:10,275 --> 00:15:14,520 il y a un court laps de temps lorsque vous voyez le spinner sur 198 00:15:14,520 --> 00:15:18,730 l'écran avant que les cartes ne soient chargées. 199 00:15:18,730 --> 00:15:21,520 De même, lorsque vous allez au menu.component, 200 00:15:21,520 --> 00:15:24,765 vous verrez le spinner sur le côté gauche pendant 201 00:15:24,765 --> 00:15:28,995 deux secondes avant que le menu réel ne soit mis à jour, 202 00:15:28,995 --> 00:15:33,395 et quand vous allez à un plat individuel aussi vous voyez que 203 00:15:33,395 --> 00:15:38,505 le spinner sur l'écran avant que les détails du plat soient rendus, 204 00:15:38,505 --> 00:15:42,500 et dans le composant about aussi de la même façon, vous verrez que, 205 00:15:42,500 --> 00:15:50,400 vous aurez le cercle de rotation là avant que les informations du leader soient mises à jour. 206 00:15:50,400 --> 00:15:53,520 Chaque fois que nous passons à l'un de ces, 207 00:15:53,520 --> 00:16:02,190 , vous verrez un court délai similaire avant que l'inflammation ne soit mise à jour sur l'écran. 208 00:16:04,030 --> 00:16:12,860 Donc, avec cela, vous voyez comment vous pouvez gérer le retard dans l'obtention des résultats, 209 00:16:12,860 --> 00:16:18,874 ou retard dans la résolution de la promesse du côté service dans votre composant 210 00:16:18,874 --> 00:16:21,830 et tenir l'utilisateur informé du fait qu'il y a 211 00:16:21,830 --> 00:16:25,495 un court délai avant que l'écran ne soit mis à jour. 212 00:16:25,495 --> 00:16:28,260 Ceci termine cet exercice. 213 00:16:28,260 --> 00:16:35,420 Dans cet exercice, nous avons vu comment nous pouvons simuler un court délai avec nos promesses. 214 00:16:35,420 --> 00:16:38,575 Se résoudre à partir des services, 215 00:16:38,575 --> 00:16:45,185 et nous avons également vu comment tenir l'utilisateur informé en utilisant les composants de matériau angulaire MD spinner 216 00:16:45,185 --> 00:16:49,460 pour afficher sur l'écran pour 217 00:16:49,460 --> 00:16:53,900 la durée lorsque les résultats ne sont pas encore disponibles, 218 00:16:53,900 --> 00:16:59,025 qui est pour la durée jusqu'à ce que la promesse soit résolue. 219 00:16:59,025 --> 00:17:01,470 Ceci termine cet exercice. 220 00:17:01,470 --> 00:17:07,770 C'est le bon moment pour vous de faire un commit git avec le message promis Deuxième partie.