Après la courte introduction aux promesses dans la conférence précédente,
passons à notre prochain exercice où nous ferons usage des promesses dans notre application angulaire.
En particulier, les promesses sont un moyen essentiel de gérer les retards, surtout lorsque
vous avez besoin d'accéder et d'obtenir les données d'un serveur
avant d'être livré au composant via votre service.
Ainsi, les services renvoient souvent des promesses à
les composants lorsque les composants appellent les méthodes de service,
et par la suite lorsque la promesse
se résout, les composants auront les résultats à leur disposition.
Nous allons reconfigurer les services que nous avons dans
notre application angulaire pour retourner
promesses, puis nous reconfigurerons
nos composants pour être en mesure de faire face aux promesses.
Notre première étape dans cet exercice est de reconfigurer tous les services pour rendre des promesses.
Donc, chacune des méthodes au sein de notre service au lieu de retourner
la valeur immédiatement, il retournera des promesses.
Alors, comment configurons-nous nos services pour qu'ils renvoient des promesses ?
Donc, en allant dans le fichier dishservice.ts,
la méthode getDays ici retournera une promesse au lieu du tableau de plat.
Donc, nous configurons la méthode getDish pour renvoyer la promesse
en enfermant cet objet plat dans une promesse.
Ce que cela signifie est que si la promesse se résout alors le résultat livré
par la promesse GetDays serait un tableau de plat.
Donc, dans votre composant
, vous recevrez le tableau de plat si la promesse est correcte.
Maintenant que nous avons configuré les GetDays pour retourner une promesse,
nous devons reconfigurer le code afin
que ce tableau de plats soit retourné dans le cadre d'une promesse.
Maintenant que nous avons le résultat déjà disponible pour nous,
Je vais utiliser la méthode de raccourci de
retourner la promesse en résolvant la promesse immédiatement.
Maintenant évidemment, cela fonctionne bien si vous avez les résultats immédiatement disponibles avec vous.
Mais, lorsque vous reconfigurez votre service à
être en mesure d'aller chercher ces données à partir d'un serveur,
alors nous devrons réécrire ce code pour faire face au fait que
le service ne retournera pas le résultat
immédiatement à la place vous devrez attendre un certain temps.
Dans le prochain exercice,
, nous allons simuler le délai en utilisant une méthode JavaScript afin qu'il vous donne
une idée de ce que cela signifie de gérer les retards dans la réception d'un résultat d'une promesse.
Maintenant que nous avons configuré les GetDats pour retourner la promesse,
de la même manière, nous allons reconfigurer les deux méthodes restantes.
Donc, je vais copier cette promesse de
ici et ensuite simplement attacher ceci aux deux autres là-bas,
afin que je les convertisse aussi pour retourner des promesses
et ensuite, bien sûr, tout ce que nous avons
ici devrait être inclus dans la résolution de promesse.
Donc, je vais juste copier la promesse de résolution
et le joindre à l'intérieur de la résolution ici.
De même, pour le plat en vedette, je vais l'inclure dans la résolution de la promesse.
Maintenant, mon service de plat est configuré pour retourner des promesses.
Évidemment, cela signifie aussi que je dois aller à
mes composants, puis reconfigurer les composants pour pouvoir traiter
avec le fait qu'ils ne reçoivent pas les données
immédiatement à la place ils reçoivent une promesse et ensuite ils devront implémenter la méthode then dans
dont la promesse quand il en résultera vous fournira les données.
Donc, maintenant que nous avons configuré le service de plat,
nous connaissons un endroit où le service est activement utilisé et c'est le composant de menu.
Alors laissez-moi vous montrer comment nous allons reconfigurer
le composant pour pouvoir faire face à la promesse.
Donc, quand vous allez au menucomponent.ts, vous remarquerez immédiatement
qu'il y a une ligne rouge squiggly sous la vaisselle parce que,
comme vous le voyez, maintenant,
le dishservice.GetDays retourne une promesse et puis ici vous avez,
la promesse étant assignée à un objet de tableau de plat et ce n'est pas correct.
Comment reconfigurer ce code ?
Donc, comme je l'ai mentionné,
quand nous reconfigurons le code,
nous devons implémenter le then et le catch pour les GetDats.
Alors, laissez-moi aller de l'avant et implémenter juste le alors en ce moment,
pour la méthode GetDats parce que le catch peut être implémenté plus tard.
En ce moment, nous savons que la promesse sera toujours résolue correctement,
donc nous allons implémenter la méthode alors ici,
et ensuite, à l'intérieur de la méthode alors,
Je recevrai l'objet vaisselle entrant lorsque la promesse sera résolue.
Et quand c'est vaisselle objet entre en paramètre,
donc vous voyez que j'écris une fonction de flèche ici,
Je vais juste couper ça et l'inclure juste là.
Vous y allez. C'est ainsi que votre composant peut maintenant
prendre possession de la promesse, puis récupérer les résultats lorsque la promesse est résolue.
Vous pouvez voir que nous avons le DishService GetDish et puis la méthode
changer à elle et par laquelle quand le alors est appelé,
lorsque la promesse se résout de l'autre côté,
alors les plats vous seront livrés parce que la méthode GetDains
renvoie une promesse mais le résultat sera un tableau de plat.
Ce tableau de plat entre en paramètre ici donc j'écris une fonction de flèche
ici où j'assigne cette vaisselle aux plats.
Donc, quand cette promesse sera résolue alors les plats
seront assignés à ce plat. C'est ça.
Maintenant, mon composant de menu est prêt à faire face à la promesse.
Bien sûr, pour faire face à l'erreur, vous devez également chaîner la méthode catch dans la méthode GetDats.
Donc, le alors et le catch sont des méthodes que
la promesse fournit pour vous et donc vous implémentez cela et dans
que vous fournirez la fonction qui traite avec
la situation lorsque la promesse se résout ou lorsque la promesse rejette avec une erreur.
Maintenant, de même, nous devrions reconfigurer la méthode de détail de plat
et aussi le composant maison pour faire face au fait que
le DishService livre maintenant des promesses plutôt que de livrer les valeurs immédiatement.
Pendant que nous y sommes,
nous pourrions aussi bien reconfigurer le leader et le service de promotion aussi.
Donc, je vais le laisser comme un exercice pour vous de compléter,
mettre à jour à la fois le service leader et le service de promotion pour être en mesure
de tenir les promesses correspondantes.
Aussi, par conséquent, vous devrez reconfigurer
le code de script de type composant dans le composant about dans le composant dish detail,
dans le composant home pour faire face au fait que vous recevez maintenant des promesses plutôt que les résultats réels.
Donc, je vais vous laisser compléter cette partie au lieu d'illustrer tout cela en détail,
Je vous ai montré une étape avec le composant de détail du plat.
Veuillez compléter les étapes avec le leader et le service de promotion,
, puis configurer les composants correspondants en conséquence.
Laissez-moi vous présenter rapidement les mises à jour que vous devez compléter.
Donc, comme vous voyez le service des leaders, j'ai déjà mis à jour avec la promesse.
Comme vous pouvez le voir ici,
toutes les méthodes ont maintenant été mises à jour pour retourner
promesses comme nous l'avons fait avec le DishService.
De même, les services de promotion ont également mis à jour à
retour promesses de toutes les méthodes là-bas.
Maintenant, en allant au composant about,
vous verrez que dans le composant about aussi nous avons configuré pour
recevoir les valeurs dans le temps de la promesse là-bas.
De même, dans le composant de détail du plat, vous remarquerez que j'ai
reconfiguré cela pour faire face à la promesse là-bas.
De même, dans le composant home,
, vous remarquerez que dans le composant home
toutes les trois méthodes ici : getFeaturedDish,
FeaturedPromotion et FeaturedLeader ont été mises à jour,
avec le puis attaché à chacune d'entre elles pour faire face à la promesse.
Le code est à peu près similaire à ce que j'ai illustré avec le composant de menu.
Une fois que vous avez terminé cela,
jetons un coup d'œil à notre application.
Aller à notre application dans le navigateur,
vous ne verrez aucune différence dans l'application.
Cela fonctionne exactement de la même manière qu'auparavant,
sauf maintenant il utilise des promesses quand
les services sont mis en œuvre et vos composants
traitent les promesses quand elles sont résolues.
Donc, le composant de menu fonctionne correctement et
aussi le composant de détail de plat fonctionne également correctement.
Avec cela, nous terminons cet exercice.
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.
Ceci termine cet exercice.
C'est le bon moment pour vous de faire un commit git avec le message 'Promise part un'.