1 00:00:03,830 --> 00:00:09,840 Après la courte introduction aux promesses dans la conférence précédente, 2 00:00:09,840 --> 00:00:15,235 passons à notre prochain exercice où nous ferons usage des promesses dans notre application angulaire. 3 00:00:15,235 --> 00:00:24,060 En particulier, les promesses sont un moyen essentiel de gérer les retards, surtout lorsque 4 00:00:24,060 --> 00:00:27,885 vous avez besoin d'accéder et d'obtenir les données d'un serveur 5 00:00:27,885 --> 00:00:32,915 avant d'être livré au composant via votre service. 6 00:00:32,915 --> 00:00:36,440 Ainsi, les services renvoient souvent des promesses à 7 00:00:36,440 --> 00:00:41,050 les composants lorsque les composants appellent les méthodes de service, 8 00:00:41,050 --> 00:00:43,490 et par la suite lorsque la promesse 9 00:00:43,490 --> 00:00:47,385 se résout, les composants auront les résultats à leur disposition. 10 00:00:47,385 --> 00:00:51,920 Nous allons reconfigurer les services que nous avons dans 11 00:00:51,920 --> 00:00:55,970 notre application angulaire pour retourner 12 00:00:55,970 --> 00:00:58,550 promesses, puis nous reconfigurerons 13 00:00:58,550 --> 00:01:02,390 nos composants pour être en mesure de faire face aux promesses. 14 00:01:02,390 --> 00:01:10,925 Notre première étape dans cet exercice est de reconfigurer tous les services pour rendre des promesses. 15 00:01:10,925 --> 00:01:14,704 Donc, chacune des méthodes au sein de notre service au lieu de retourner 16 00:01:14,704 --> 00:01:18,500 la valeur immédiatement, il retournera des promesses. 17 00:01:18,500 --> 00:01:21,685 Alors, comment configurons-nous nos services pour qu'ils renvoient des promesses ? 18 00:01:21,685 --> 00:01:26,635 Donc, en allant dans le fichier dishservice.ts, 19 00:01:26,635 --> 00:01:35,390 la méthode getDays ici retournera une promesse au lieu du tableau de plat. 20 00:01:35,390 --> 00:01:38,840 Donc, nous configurons la méthode getDish pour renvoyer la promesse 21 00:01:38,840 --> 00:01:43,695 en enfermant cet objet plat dans une promesse. 22 00:01:43,695 --> 00:01:49,235 Ce que cela signifie est que si la promesse se résout alors le résultat livré 23 00:01:49,235 --> 00:01:55,435 par la promesse GetDays serait un tableau de plat. 24 00:01:55,435 --> 00:01:59,164 Donc, dans votre composant 25 00:01:59,164 --> 00:02:03,290 , vous recevrez le tableau de plat si la promesse est correcte. 26 00:02:03,290 --> 00:02:07,845 Maintenant que nous avons configuré les GetDays pour retourner une promesse, 27 00:02:07,845 --> 00:02:10,370 nous devons reconfigurer le code afin 28 00:02:10,370 --> 00:02:14,735 que ce tableau de plats soit retourné dans le cadre d'une promesse. 29 00:02:14,735 --> 00:02:18,770 Maintenant que nous avons le résultat déjà disponible pour nous, 30 00:02:18,770 --> 00:02:22,190 Je vais utiliser la méthode de raccourci de 31 00:02:22,190 --> 00:02:27,875 retourner la promesse en résolvant la promesse immédiatement. 32 00:02:27,875 --> 00:02:34,720 Maintenant évidemment, cela fonctionne bien si vous avez les résultats immédiatement disponibles avec vous. 33 00:02:34,720 --> 00:02:38,120 Mais, lorsque vous reconfigurez votre service à 34 00:02:38,120 --> 00:02:41,885 être en mesure d'aller chercher ces données à partir d'un serveur, 35 00:02:41,885 --> 00:02:46,670 alors nous devrons réécrire ce code pour faire face au fait que 36 00:02:46,670 --> 00:02:49,310 le service ne retournera pas le résultat 37 00:02:49,310 --> 00:02:52,875 immédiatement à la place vous devrez attendre un certain temps. 38 00:02:52,875 --> 00:02:54,430 Dans le prochain exercice, 39 00:02:54,430 --> 00:03:03,290 , nous allons simuler le délai en utilisant une méthode JavaScript afin qu'il vous donne 40 00:03:03,290 --> 00:03:12,875 une idée de ce que cela signifie de gérer les retards dans la réception d'un résultat d'une promesse. 41 00:03:12,875 --> 00:03:16,865 Maintenant que nous avons configuré les GetDats pour retourner la promesse, 42 00:03:16,865 --> 00:03:20,770 de la même manière, nous allons reconfigurer les deux méthodes restantes. 43 00:03:20,770 --> 00:03:24,890 Donc, je vais copier cette promesse de 44 00:03:24,890 --> 00:03:30,430 ici et ensuite simplement attacher ceci aux deux autres là-bas, 45 00:03:30,430 --> 00:03:34,220 afin que je les convertisse aussi pour retourner des promesses 46 00:03:34,220 --> 00:03:37,100 et ensuite, bien sûr, tout ce que nous avons 47 00:03:37,100 --> 00:03:40,225 ici devrait être inclus dans la résolution de promesse. 48 00:03:40,225 --> 00:03:43,129 Donc, je vais juste copier la promesse de résolution 49 00:03:43,129 --> 00:03:50,675 et le joindre à l'intérieur de la résolution ici. 50 00:03:50,675 --> 00:04:00,080 De même, pour le plat en vedette, je vais l'inclure dans la résolution de la promesse. 51 00:04:00,080 --> 00:04:05,005 Maintenant, mon service de plat est configuré pour retourner des promesses. 52 00:04:05,005 --> 00:04:07,610 Évidemment, cela signifie aussi que je dois aller à 53 00:04:07,610 --> 00:04:11,360 mes composants, puis reconfigurer les composants pour pouvoir traiter 54 00:04:11,360 --> 00:04:14,090 avec le fait qu'ils ne reçoivent pas les données 55 00:04:14,090 --> 00:04:21,200 immédiatement à la place ils reçoivent une promesse et ensuite ils devront implémenter la méthode then dans 56 00:04:21,200 --> 00:04:25,550 dont la promesse quand il en résultera vous fournira les données. 57 00:04:25,550 --> 00:04:28,639 Donc, maintenant que nous avons configuré le service de plat, 58 00:04:28,639 --> 00:04:35,020 nous connaissons un endroit où le service est activement utilisé et c'est le composant de menu. 59 00:04:35,020 --> 00:04:37,730 Alors laissez-moi vous montrer comment nous allons reconfigurer 60 00:04:37,730 --> 00:04:40,640 le composant pour pouvoir faire face à la promesse. 61 00:04:40,640 --> 00:04:44,420 Donc, quand vous allez au menucomponent.ts, vous remarquerez immédiatement 62 00:04:44,420 --> 00:04:49,984 qu'il y a une ligne rouge squiggly sous la vaisselle parce que, 63 00:04:49,984 --> 00:04:51,880 comme vous le voyez, maintenant, 64 00:04:51,880 --> 00:04:58,875 le dishservice.GetDays retourne une promesse et puis ici vous avez, 65 00:04:58,875 --> 00:05:05,660 la promesse étant assignée à un objet de tableau de plat et ce n'est pas correct. 66 00:05:05,660 --> 00:05:08,005 Comment reconfigurer ce code ? 67 00:05:08,005 --> 00:05:09,559 Donc, comme je l'ai mentionné, 68 00:05:09,559 --> 00:05:11,440 quand nous reconfigurons le code, 69 00:05:11,440 --> 00:05:16,100 nous devons implémenter le then et le catch pour les GetDats. 70 00:05:16,100 --> 00:05:20,820 Alors, laissez-moi aller de l'avant et implémenter juste le alors en ce moment, 71 00:05:20,820 --> 00:05:27,360 pour la méthode GetDats parce que le catch peut être implémenté plus tard. 72 00:05:27,360 --> 00:05:31,190 En ce moment, nous savons que la promesse sera toujours résolue correctement, 73 00:05:31,190 --> 00:05:33,665 donc nous allons implémenter la méthode alors ici, 74 00:05:33,665 --> 00:05:36,645 et ensuite, à l'intérieur de la méthode alors, 75 00:05:36,645 --> 00:05:46,650 Je recevrai l'objet vaisselle entrant lorsque la promesse sera résolue. 76 00:05:46,650 --> 00:05:50,400 Et quand c'est vaisselle objet entre en paramètre, 77 00:05:50,400 --> 00:05:53,190 donc vous voyez que j'écris une fonction de flèche ici, 78 00:05:53,190 --> 00:06:03,120 Je vais juste couper ça et l'inclure juste là. 79 00:06:03,170 --> 00:06:09,510 Vous y allez. C'est ainsi que votre composant peut maintenant 80 00:06:09,510 --> 00:06:16,775 prendre possession de la promesse, puis récupérer les résultats lorsque la promesse est résolue. 81 00:06:16,775 --> 00:06:21,575 Vous pouvez voir que nous avons le DishService GetDish et puis la méthode 82 00:06:21,575 --> 00:06:26,560 changer à elle et par laquelle quand le alors est appelé, 83 00:06:26,560 --> 00:06:28,880 lorsque la promesse se résout de l'autre côté, 84 00:06:28,880 --> 00:06:33,635 alors les plats vous seront livrés parce que la méthode GetDains 85 00:06:33,635 --> 00:06:38,450 renvoie une promesse mais le résultat sera un tableau de plat. 86 00:06:38,450 --> 00:06:42,320 Ce tableau de plat entre en paramètre ici donc j'écris une fonction de flèche 87 00:06:42,320 --> 00:06:46,880 ici où j'assigne cette vaisselle aux plats. 88 00:06:46,880 --> 00:06:49,880 Donc, quand cette promesse sera résolue alors les plats 89 00:06:49,880 --> 00:06:53,930 seront assignés à ce plat. C'est ça. 90 00:06:53,930 --> 00:06:57,455 Maintenant, mon composant de menu est prêt à faire face à la promesse. 91 00:06:57,455 --> 00:07:06,130 Bien sûr, pour faire face à l'erreur, vous devez également chaîner la méthode catch dans la méthode GetDats. 92 00:07:06,130 --> 00:07:08,390 Donc, le alors et le catch sont des méthodes que 93 00:07:08,390 --> 00:07:11,540 la promesse fournit pour vous et donc vous implémentez cela et dans 94 00:07:11,540 --> 00:07:16,790 que vous fournirez la fonction qui traite avec 95 00:07:16,790 --> 00:07:23,355 la situation lorsque la promesse se résout ou lorsque la promesse rejette avec une erreur. 96 00:07:23,355 --> 00:07:28,850 Maintenant, de même, nous devrions reconfigurer la méthode de détail de plat 97 00:07:28,850 --> 00:07:33,890 et aussi le composant maison pour faire face au fait que 98 00:07:33,890 --> 00:07:44,520 le DishService livre maintenant des promesses plutôt que de livrer les valeurs immédiatement. 99 00:07:44,520 --> 00:07:46,470 Pendant que nous y sommes, 100 00:07:46,470 --> 00:07:51,305 nous pourrions aussi bien reconfigurer le leader et le service de promotion aussi. 101 00:07:51,305 --> 00:07:55,100 Donc, je vais le laisser comme un exercice pour vous de compléter, 102 00:07:55,120 --> 00:07:59,930 mettre à jour à la fois le service leader et le service de promotion pour être en mesure 103 00:07:59,930 --> 00:08:05,180 de tenir les promesses correspondantes. 104 00:08:05,180 --> 00:08:09,379 Aussi, par conséquent, vous devrez reconfigurer 105 00:08:09,379 --> 00:08:18,785 le code de script de type composant dans le composant about dans le composant dish detail, 106 00:08:18,785 --> 00:08:27,950 dans le composant home pour faire face au fait que vous recevez maintenant des promesses plutôt que les résultats réels. 107 00:08:27,950 --> 00:08:34,005 Donc, je vais vous laisser compléter cette partie au lieu d'illustrer tout cela en détail, 108 00:08:34,005 --> 00:08:37,620 Je vous ai montré une étape avec le composant de détail du plat. 109 00:08:37,620 --> 00:08:42,380 Veuillez compléter les étapes avec le leader et le service de promotion, 110 00:08:42,380 --> 00:08:45,890 , puis configurer les composants correspondants en conséquence. 111 00:08:45,890 --> 00:08:50,275 Laissez-moi vous présenter rapidement les mises à jour que vous devez compléter. 112 00:08:50,275 --> 00:08:56,365 Donc, comme vous voyez le service des leaders, j'ai déjà mis à jour avec la promesse. 113 00:08:56,365 --> 00:08:57,585 Comme vous pouvez le voir ici, 114 00:08:57,585 --> 00:09:00,410 toutes les méthodes ont maintenant été mises à jour pour retourner 115 00:09:00,410 --> 00:09:04,800 promesses comme nous l'avons fait avec le DishService. 116 00:09:04,800 --> 00:09:08,420 De même, les services de promotion ont également mis à jour à 117 00:09:08,420 --> 00:09:12,660 retour promesses de toutes les méthodes là-bas. 118 00:09:12,660 --> 00:09:16,560 Maintenant, en allant au composant about, 119 00:09:16,560 --> 00:09:22,160 vous verrez que dans le composant about aussi nous avons configuré pour 120 00:09:22,160 --> 00:09:28,790 recevoir les valeurs dans le temps de la promesse là-bas. 121 00:09:28,790 --> 00:09:33,560 De même, dans le composant de détail du plat, vous remarquerez que j'ai 122 00:09:33,560 --> 00:09:39,765 reconfiguré cela pour faire face à la promesse là-bas. 123 00:09:39,765 --> 00:09:43,495 De même, dans le composant home, 124 00:09:43,495 --> 00:09:46,190 , vous remarquerez que dans le composant home 125 00:09:46,190 --> 00:09:51,740 toutes les trois méthodes ici : getFeaturedDish, 126 00:09:51,740 --> 00:09:54,650 FeaturedPromotion et FeaturedLeader ont été mises à jour, 127 00:09:54,650 --> 00:09:59,330 avec le puis attaché à chacune d'entre elles pour faire face à la promesse. 128 00:09:59,330 --> 00:10:06,355 Le code est à peu près similaire à ce que j'ai illustré avec le composant de menu. 129 00:10:06,355 --> 00:10:08,570 Une fois que vous avez terminé cela, 130 00:10:08,570 --> 00:10:12,995 jetons un coup d'œil à notre application. 131 00:10:12,995 --> 00:10:15,665 Aller à notre application dans le navigateur, 132 00:10:15,665 --> 00:10:18,870 vous ne verrez aucune différence dans l'application. 133 00:10:18,870 --> 00:10:21,409 Cela fonctionne exactement de la même manière qu'auparavant, 134 00:10:21,409 --> 00:10:26,385 sauf maintenant il utilise des promesses quand 135 00:10:26,385 --> 00:10:29,615 les services sont mis en œuvre et vos composants 136 00:10:29,615 --> 00:10:33,080 traitent les promesses quand elles sont résolues. 137 00:10:33,080 --> 00:10:36,530 Donc, le composant de menu fonctionne correctement et 138 00:10:36,530 --> 00:10:40,440 aussi le composant de détail de plat fonctionne également correctement. 139 00:10:40,440 --> 00:10:43,150 Avec cela, nous terminons cet exercice. 140 00:10:43,150 --> 00:10:55,990 Dans cet exercice, nous avons vu comment nous avons pu mettre à niveau nos services pour qu'ils donnent des promesses et nous avons également mis à jour nos composants pour pouvoir faire face aux promesses. 141 00:10:55,990 --> 00:10:58,710 Ceci termine cet exercice. 142 00:10:58,710 --> 00:11:06,300 C'est le bon moment pour vous de faire un commit git avec le message 'Promise part un'.