[MUSIC]
La communication entre le client et le serveur n'est jamais une affaire faite.
Pour paraphraser un fameux proverbe,
il y a beaucoup de carquois entre le client et le serveur.
Alors, comment traiter les erreurs quand elles surviennent,
quand nous communiquons entre le client et le serveur ?
Parlons de cela dans cet exercice.
Lorsque le serveur génère une réponse, ou le client HTTP,
tout en communiquant avec le serveur, rencontre une erreur puis génère
une réponse d'erreur, celle-ci est fournie sous la forme d'une réponse d'erreur HTTP.
Maintenant, cette réponse, nous voulons être en mesure de la traiter et
puis la transformer en une chaîne de message de réponse, que
peut être remise au client afin que le client puisse l'afficher à l'écran.
Donc, pour nous permettre de faire cela,
, nous allons créer un nouveau service nommé message HTTP de processus dans ce dossier.
Donc, pour ce faire, à l'invite tapez ng,
g service services/processhttpmsg,
et générer le service processHttpmsg.
Maintenant, une fois le service généré, nous allons aller de l'avant et
l'ajouter dans le module de l'application.
Et puis nous ajouterons une méthode au service processHTTPMsg.
Maintenant que nous avons créé le service processHttpMSG,
allons-y et ajoutez-le dans le fichier app.module.ts.
Donc, en allant dans le fichier app.module.ts,
laissez-moi importer le service processHTTPMSG,
De './services/process-httpmsg.service '.
Donc une fois que ce sera importé, alors nous serons en mesure de l'utiliser dans notre application.
Alors allons-y et ajouterons cela à nos fournisseurs.
Donc, en entrant dans nos fournisseurs,
laissez-moi ajouter dans le processHTTPMSGService dans les fournisseurs.
La première chose que nous allons faire est d'inclure une nouvelle méthode dans
le processHTTPMsgService appelé erreurs de handle,
qui prendra soin de gérer les erreurs quand elles surviennent.
Et puis nous en ferons usage dans les services où nous accédons au serveur.
Pour commencer, nous allons d'abord importer,
ThrowError de, rxjs,
et cela nous aide à lancer des erreurs chaque fois que cela se produit.
Et puis nous importons HttperrorResponse de,
angulaire/common/http.
Ensuite, nous allons commencer à concevoir la méthode HandleError, et
cela prend, comme paramètre, une erreur qui pourrait être une réponse,
qui est une réponse d'erreur du serveur,
ou toute autre raison pour laquelle l'erreur se produit.
Donc, dans cette méthode HandleError, que sommes-nous censés faire ?
Essayons de construire un message qui résume l'erreur.
Nous allons donc inclure une nouvelle variable de chaîne ici.
Si error.error est une instance
d'Errorevent, donc s'il s'agit d'un événement d'erreur qui se produit,
alors error.error.message contiendra des informations.
Nous allons donc définir le message d'erreur sur
error.error.message.
Si ce n'est pas le cas, cela signifie que cela vient du côté serveur,
et donc, dans ce cas, le message d'erreur est construit en disant égal à backguillemets,
notez les backguillemets ici, puis $ {error.status}.
Nous extrayons donc les informations d'état à partir de là.
Et puis, - error.statusText,
si le StatusText existe, ou
qui sera une chaîne vide là.
Et puis nous allons également inclure error.error lui-même,
l'objet d'erreur complet lui-même, juste là dans la chaîne.
Et puis utilisez cela comme message d'erreur.
Maintenant, une fois que nous avons le message d'erreur,
alors nous serons en mesure d'utiliser ThrowError pour
retourner une erreur observable à notre application.
Donc, ce que cela signifie, c'est que cela lance une erreur à ce stade,
avec le message d'erreur inclus.
Donc, cette chaîne de message d'erreur est construite sur la base des informations
que nous obtenons ici, soit parce que le côté serveur a répondu avec une erreur, soit
l'erreur pourrait être d'autres raisons.
Donc, dans les deux cas, nous allons construire un message d'erreur puis le retourner.
Maintenant, où utilisons-nous cette erreur de handle ?
Maintenant, au sein de nos services, par exemple le fichier dishservice.ts,
, nous avons vu que plus tôt quand nous avons dit ce HTTP get, puis nous avons juste dit map,
et ensuite supposé que la réponse est toujours une réponse positive.
Mais supposons que leur réponse n'est pas positive, et
alors il renvoie une erreur, alors nous devons attraper cette erreur.
Pour nous aider avec cela, nous importons l'opérateur CatcherRror de rxjs,
et ensuite nous importons également le processHTTPMSGService
que nous venons de créer plus tôt dans
notre service de vaisselle afin que nous puissions utiliser la méthode d'erreur de handle à partir de là.
Donc, nous importons ceci à partir du./process-httpmsg.service.
Et puis, en descendant vers le constructeur,
nous injectons maintenant le service de message HTTP de processus
dans le constructeur, avec le client HTTP.
Pour que nous puissions utiliser ce service,
en particulier la méthode d'erreur de handle du service pour gérer les erreurs
qui sont renvoyées par notre client HTTP là-bas.
Maintenant, une fois que nous avons configuré le constructeur,
puis pour gérer l'erreur dans la méthode GetDains pour
exemple, nous allons diriger vers la méthode CatcherRors.
Et puis appelez la méthode HandleError après
This.processHttpMsgService dans la méthode CatcherRror.
Donc de cette façon Lorsque le client HTTP renvoie une erreur, cela sera traité et
le message d'erreur approprié sera extrait.
Et puis il finira par lancer l'erreur via
la méthode HandleError à ce stade.
De même, faisons la même chose aux méthodes GetDish et
aux méthodes GetFeatureDish.
Maintenant, quand il s'agit de la méthode getDish ids,
puisque la méthode GetDish ids utilise la méthode GetDish,.
Donc, nous n'avons pas besoin d'appeler explicitement HandleError car si une erreur survient
, la méthode GetDains aura déjà converti cette erreur en une chaîne d'erreur.
Donc, nous avons juste besoin d'attraper l'erreur, puis retourner l'erreur de GetDish Ids.
Normalement, nous n'arriverions même pas à ce point si une erreur se produit, car
la méthode GetDis aurait géré l'erreur correctement à ce stade.
Donc, une fois que nous avons configuré le service plat de manière appropriée,
, alors nous serons en mesure de faire usage de la méthode CatcherRror
pour faire face aux erreurs qui surviennent.
Maintenant que nous avons mis à jour notre service pour être en mesure de traiter les erreurs.
Comment gérons-nous cela dans notre composant eux-mêmes ?
Donc dans un composant, donc par exemple, quand nous allons au composant de menu.
Ce que nous réalisons, c'est que lorsque nous faisons l'abonnement,
, nous nous attendions à ce que les plats nous soient livrés.
Maintenant, il est possible que l'instruction de la vaisselle,
l'erreur soit délivrée par le lancer observable et
alors que le message d'erreur est disponible pour nous.
Donc, pour faire face à cette situation, je vais introduire une nouvelle variable
appelée errMess dans le composant de menu qui est de type chaîne.
Et puis la méthode subscribe elle-même fournit un moyen de gérer les erreurs.
Donc, la méthode subscribe, en ce moment nous avons seulement spécifié une fonction ici.
Nous pouvons également spécifier une seconde fonction qui sera appelée
lorsque l'erreur se produira.
Donc, dans ce cas, je peux fournir une deuxième fonction d'erreur disant,
errMess, qui est la valeur retournée dans
lorsque le lancer observable est fait par le DishService.
Donc, dans ce cas, je dirais this.errmess = errmess, et c'est tout.
Donc, ici, ce qui se passe est que lorsque l'observable
est retourné par le DishService est une valeur,
alors cela serait géré par la première partie.
Si l'observable est renvoyé avec le lancer observable,
alors cette fonction sera exécutée.
Et dans cette fonction, nous prenons le message d'erreur et
puis capturer ce message d'erreur dans cette chaîne ErrMess que nous avons ici.
Donc maintenant nous avons le message d'erreur disponible pour nous, donc
nous pouvons afficher ce message d'erreur sur la vue de ce composant de menu.
Alors, comment affichons-nous cela dans la vue des composants de menu ?
Donc, en allant au fichier de modèle de composants de menu, ici, nous voyons que si la vaisselle n'est pas nulle,
alors nous affichons le menu avec tous les plats.
Si la vaisselle est nulle alors ce spinner est affiché là.
Maintenant, nous allons ajouter en un de plus ici,
même si la errMess que nous avons,
la variable, n'est pas nulle, alors aussi
le spinner devrait être caché et puis,
enfin, ajouter dans un div de plus avec un NGif.
Donc, ce que cela fait est que cette dernière plongée sera affichée dans
cas où il y a une erreur, et le message d'erreur.
La chaîne Errmess est définie sur le message d'erreur.
Donc, dans ce cas, nous allons simplement dire erreur h2,
et ensuite je vais juste afficher cette chaîne comme,
Une chaîne dans la vue là-bas, c'est tout.
Vous pouvez faire une façon plus élaborée d'afficher le message d'erreur si vous le souhaitez
.
Mais tout ce que je vais faire est s'il y a une erreur,
Je vais simplement afficher une erreur sur l'écran et ensuite afficher un ErrMess.
Vous pouvez même le styliser en changeant la couleur en rouge et
ainsi de suite, mais je vais juste le laisser comme ça là.
Donc, avec cela, nous finirons par afficher le message d'erreur dans la vue ici.
La même procédure peut également être utilisée avec le composant plat et
aussi le composant maison où nous accédons au service plat.
Donc, en allant au composant plat, je vais faire exactement la même chose,
donc dans le composant plat, je vais inclure le, Errmess ici.
Et puis juste ici dans le subscribe,
c'est là que nous recevons la valeur du plat.
Donc la première partie,
ce que nous avons déjà inclus sera appelé si l'observable renvoie une valeur.
Mais si elle ne renvoie pas de valeur, alors nous devons traiter le message d'erreur.
Et nous allons utiliser exactement la même fonction de message d'erreur
que nous avons définie plus tôt dans le composant de menu.
Donc, nous dirons que this.errmess
= Ermess ici.
C'est tout, donc mon composant plat est maintenant mis à jour.
J'ai donc besoin de mettre à jour le fichier de modèle du composant plat.
Donc, en allant au fichier template,
nous voyons que nous allons afficher le plat si le plat n'est pas nul.
Et puis en bas ici, nous gérons la situation
où nous montrerons le spinner si le plat est nul.
Alors laissez-moi ajouter aussi, si le message d'erreur n'est pas nul, alors je devrais
afficher un message d'erreur plutôt que le plat ici, non ?
Alors, laissez-moi aller de l'avant et
copier le code du composant de menu.
Je vais utiliser exactement le même code pour
le fichier de modèle de composants de détail plat également.
Alors, juste là.
Laissez-moi aller de l'avant et insérer ce code ici.
Donc, nous voyons que si Errmess n'est pas null,
alors cette erreur sera affichée dans la vue là-bas.
Maintenant, même chose,
en allant à la composante maison, nous devons passer par la même procédure.
Maintenant, dans la composante maison, bien sûr, nous avons plat, promotion et leader.
Donc, je vais définir séparé, Strings pour
chacun d'eux parce que l'erreur pourrait provenir de l'un des trois.
En ce moment, nous avons seulement affaire à des plats qui sont récupérés du côté serveur.
Les deux restants je m'attends à ce que vous le fassiez dans le cadre de la, Affectation finale.
Donc, nous allons, Je vais dire corde errmess plat et ensuite descendre dans le code ici.
Et dans le code ici,
, nous allons simplement dire errmess.
Ce plat errmess = n'importe quelle errmess
, c'est tout.
Et de même, mettez à jour les fichiers de modèle des composants d'origine.
Et en allant au fichier de modèle de composants maison,
nous voyons que nous avons le bac à vaisselle affiché là,
donc maintenant pour celui-ci je devrais dire ou plat Errmess.
Et puis, en bas ici, j'inclurai le code
que j'ai copié à partir du composant de menu, et
puis je le mettrai à jour pour plat Errmess ici.
Et aussi, mettez à jour ceci pour Disherrmess ici, c'est tout.
Sauvegardons les modifications.
En allant dans le navigateur, vous voyez que tout fonctionne comme avant.
La maison, la composante menu et aussi la composante détail du plat sans aucun problème.
Maintenant, la question est : comment pouvons-nous causer des erreurs ?
Pour provoquer des erreurs, une façon possible de traiter le problème est que nous allons et
chercher une information inexistante auprès du serveur.
Laisse-moi aller au service de vaisselle et ensuite causer
mon premier problème dans le DishService ici.
Donc, pour le plat en vedette au lieu de la vaisselle, laissez-moi faire une erreur et
dire dishees puis sauvez le changement.
Évidemment, cela signifie que cette URL n'existe pas.
Alors, que se passera-t-il s'il accède au serveur ?
Aller au navigateur quand nous défilons maintenant,
vous voyez que le plat n'est pas affiché ici.
Il est dit ici Erreur 404 Introuvable.
C'est parce que nous essayons d'accéder aux informations du plat à
l'URL dishees qui n'existe pas du côté du serveur.
Donc, vous voyez comment le message d'erreur est affiché ici.
Bien sûr, vous pouvez être un peu plus fantaisie et faire plus de travail autour de cela et
puis afficher le message d'erreur d'une manière plus significative.
Mais le principe de base est mis en évidence ici en disant que vous
pouvez afficher un message d'erreur si quelque chose n'est pas correctement exécuté
lorsque vous essayez d'accéder aux informations depuis votre serveur.
Bien sûr, c'est donc une erreur créée artificiellement dans mon application.
Pour provoquer encore un autre type d'erreur, je suis allé à ma fenêtre de terminal et
puis arrêtez le serveur pour voir ce que mon application Angular fera dans ce cas.
Donc, après avoir arrêté le serveur,
voyons ce que le composant home affichera dans sa vue.
Donc, en allant au composant home, nous voyons maintenant que parce que mon application Angular
n'est pas capable d'accéder au serveur, elle a provoqué une erreur à nouveau.
Et puis il montre cette chaîne là pour indiquer qu'une erreur s'est produite.
Bien sûr, c'est une chaîne cryptique,
ne transmet rien de significatif sur la source de l'erreur.
Mais c'est tout ce que nous pourrions obtenir en essayant d'accéder au serveur dans cette application.
Même chose, si je vais au menu, vous verrez le même genre de chose étant
affiché, parce que le serveur n'est pas disponible, et donc
les informations de plat ne peuvent pas être récupérées du serveur.
Avec cela, nous terminons cet exercice.
Dans cet exercice, nous avons appris à traiter les erreurs
qui surviennent lors de la communication client serveur dans notre application Angular.
C'est le bon moment pour vous de faire un commit git avec le message http partie deux.
[MUSIQUE]