Comme nous l'avons déjà appris dans la leçon précédente, le protocole
HTTP nous permet de communiquer entre un client et un serveur.
Nous avons déjà vu quelques détails sur le protocole HTTP dans la leçon précédente.
Dans cette leçon, nous allons explorer la prise en charge angulaire pour HTTP.
Angular prend en charge HTTP via le client HTTP Angular.
Nous allons voir comment nous pouvons tirer parti de
le client HTTP angulaire pour la communication client-serveur,
dans notre application Angular.
Les deux exercices qui suivent cette conférence,
, nous allons explorer l'utilisation pratique de
le client HTTP Angular dans notre application Angular.
Regardons un peu les détails du client HTTP dans cette conférence.
Comme on pouvait s'y attendre,
Angular exploite le protocole HTTP pour permettre la communication entre
notre client Angular et le serveur basé sur HTTP.
La plupart des navigateurs modernes, généralement utilisés pour prendre en charge
le XMLHttpRequest ou la façon XHR de communiquer avec le serveur.
De plus en plus, les navigateurs adoptent l'API Fetch,
qui est un remplacement moderne de XMLHttpRequest comme
un moyen de communiquer entre le navigateur et le serveur.
Angular exploite cela pour communiquer avec le serveur à l'aide du client HTTP.
Nous allons examiner l'utilisation du client HTTP et comment nous pouvons utiliser HttpClientModule,
dans notre application Angular pour activer la Communication Client-Serveur.
Toute communication entre le client et le serveur comme on s'y attend,
va être asynchrone par nature.
Donc, ce qui signifie que votre client a besoin de
pour attendre que les données soient livrées à partir du site du serveur.
Par conséquent, votre client doit être configuré
pour faire face à ce retard dans l'obtention des données.
Dans le module précédent lui-même,
nous avions déjà configuré nos applications clientes pour
être en mesure de montrer le spinner de progression sur l'interface utilisateur,
pour tenir l'utilisateur informé du fait qu'il y a un retard dans l'obtention des données,
avant que la vue ne soit rendue.
Cela vient à notre aide dans cette leçon,
où nous devons évidemment faire face au retard d'obtention des données du site serveur.
L'accès aux données dans notre application Angular,
il est toujours préférable de déléguer cette responsabilité au service.
Donc, nous laissons le service traiter l'interaction avec le serveur,
et ensuite votre composant obtient les données en appelant les méthodes du service.
Interaction de service de composant que nous avons déjà configurée dans le module précédent.
Donc, tout ce que nous devons faire,
est de mettre à jour nos services pour tirer parti du module HTTP pour communiquer avec le serveur,
pour obtenir les données du serveur et ensuite,
fournir les données au composant.
Le serveur HTTP lui-même,
retournera les données à notre client et
notre module HTTP renvoie les données à notre service dans le suivi observable.
Cette observable, sera ensuite traitée et
puis retournée comme observable à notre composant.
Cette partie que nous avons déjà configurée dans le module précédent.
Donc, nous allons tirer parti de cela pour nous permettre de glisser rapidement
la communication HTTP entre le client et le serveur,
entre le service et le site du serveur,
et ensuite le reste de l'infrastructure
déjà en place dans notre application Angular
peut facilement gérer la livraison de l'observable à notre composant,
et le composant déjà abonné à cet observateur.
L'effet supplémentaire que nous allons traiter,
est comment gérer les erreurs.
Nous en parlerons un peu plus en détail dans les diapositives ultérieures.
Donc, comme je l'ai déjà mentionné,
le client HTTP renvoie un observable.
Donc, lorsque vous appelez le module HTTP,
donc vous allez configurer votre service pour utiliser le module HTTP,
et avec le module HTTP,
il vous fournit plusieurs méthodes qui correspondent aux verbes get,
put, post et delete du protocole HTTP.
Ainsi, les méthodes get, put, post,
et delete sont automatiquement supportées par le module HTTP.
Donc, vous tirez parti de ces méthodes pour pouvoir exécuter
ces opérations particulières sur le site du serveur.
Ainsi, lorsque vous émettez un appel HTTP get,
vous demandez que les données soient transmises du serveur au client.
Le client HTTP à son tour,
traitera l'observable qui est livré via le module HTTP Angular,
, puis livrera ce observable à notre composant.
Dans notre composant, nous souscrivons déjà
à l'observable qui est livré par notre service,
et donc traiter les données qui sont envoyées par l'observable,
est assez simple pour nous.
Si l'application Angular est
communiquant avec un serveur qui retourne la réponse au format JSON,
les clients HTTP Angular obtiennent la méthode elle-même
analyse la réponse JSON du serveur dans un objet anonyme.
Le client lui-même, ne sait pas exactement comment interpréter la forme de cet objet.
Ainsi, nous pouvons aider le client HTTP en spécifiant la forme de l'objet,
en spécifiant une déclaration d'une classe JavaScript,
qui spécifie la forme de l'objet afin que la sortie
de l'get puisse être consommée facilement par l'application.
Donc, dans l'exercice,
vous me verrez déclarer.
Par exemple, nous allons dire this.http.get,
et ensuite entre parenthèses angulaires,
je spécifie plat là.
Ainsi, de cette façon,
les données entrantes pour la requête get du site serveur seront converties en
un objet plat et pourront ensuite être consommées immédiatement
par mon composant lorsqu'il met en page le contenu.
Maintenant, si vous avez besoin,
vous pouvez accéder à la réponse complète venant du site du serveur.
Mais ce serait seulement dans des circonstances spécifiques,
où vous avez besoin d'accéder, par exemple,
les en-têtes du message de réponse HTTP entrant et ainsi de suite.
Mais pour la plupart des fins,
juste en déclarant la forme de l'objet,
nous pouvons facilement obtenir les données JSON automatiquement analysées d'une manière
qui peut être consommée par notre application Angular plus facilement.
Comme on s'y attend, la communication
entre le client et le serveur ne sera pas sans erreur.
Les erreurs vont apparaître pour de nombreuses raisons différentes.
Il se peut que la connexion ne soit pas établie entre le client et le serveur,
c'est peut-être le fait que la réponse du serveur soit perdue,
c'est peut-être le fait que le serveur est incapable de trouver les données que vous recherchez,
et donc renvoie un 404 indiquant que le serveur
ne peut pas fournir les données pour vous ou les données manquantes sur le site du serveur, etc.
Donc, votre client doit faire face à toutes ces erreurs.
Donc, dans notre service,
, nous allons configurer notre service pour pouvoir attraper cette erreur.
Donc, c'est là que l'utilisation de la méthode catch qui est prise en charge par le HTTP,
nous permet d'attraper l'erreur, de traiter cette erreur,
puis d'envoyer le message d'erreur à notre composant,
, puis de laisser le composant traiter le message d'erreur dans
de la façon dont il semblait approprié.
Maintenant, dans notre composant par exemple,
, nous allons afficher les informations d'erreur que nous
avons obtenues à notre avis pour indiquer à l'utilisateur,
qu'une erreur s'est produite dans l'obtention des données du site serveur.
Donc, dans le service,
nous devons traiter cette erreur.
Maintenant, lorsque cette information d'erreur obtenue à partir de
le site serveur via le client HTTP est traitée dans notre service,
alors nous allons convertir cela en une chaîne,
et cette chaîne sera transmise à notre composant en utilisant la méthode de throw observable.
Donc, la méthode throw nous permet de lancer une erreur.
Alors parce que dans notre composant, nous
souscrivons à cet observable dans la méthode subscribe,
alors vous devez faire face à l'erreur.
Donc, dans la partie subscribe,
plus tôt, nous avons vu une seule fonction étant spécifiée pour le subscribe,
et qui traite du fonctionnement normal.
Mais avec cela,
nous pouvons également fournir une seconde fonction à laquelle l'erreur sera livrée.
Donc, vous me verrez configurer la partie subscribe de mon composant
en utilisant une deuxième fonction spécifiée dans la méthode subscribe,
comme exemple illustré par ce code ici.
De cette façon, l'erreur sera interceptée dans
mon composant et ensuite message d'erreur approprié,
informations seront remises à l'utilisateur dans la vue.
Donc, nous verrons cela dans le cadre du deuxième exercice de cette leçon particulière.
Avec cette compréhension rapide du client HTTP,
nous allons maintenant passer aux exercices où nous utiliserons
le client HTTP Angular fourni par le module HTTP de la bibliothèque HTTP Angular,
pour nous permettre de communiquer avec notre serveur.