1 00:00:03,630 --> 00:00:08,225 Comme nous l'avons déjà appris dans la leçon précédente, le protocole 2 00:00:08,225 --> 00:00:15,020 HTTP nous permet de communiquer entre un client et un serveur. 3 00:00:15,020 --> 00:00:19,770 Nous avons déjà vu quelques détails sur le protocole HTTP dans la leçon précédente. 4 00:00:19,770 --> 00:00:25,440 Dans cette leçon, nous allons explorer la prise en charge angulaire pour HTTP. 5 00:00:25,440 --> 00:00:29,810 Angular prend en charge HTTP via le client HTTP Angular. 6 00:00:29,810 --> 00:00:32,700 Nous allons voir comment nous pouvons tirer parti de 7 00:00:32,700 --> 00:00:36,725 le client HTTP angulaire pour la communication client-serveur, 8 00:00:36,725 --> 00:00:38,925 dans notre application Angular. 9 00:00:38,925 --> 00:00:42,045 Les deux exercices qui suivent cette conférence, 10 00:00:42,045 --> 00:00:45,650 , nous allons explorer l'utilisation pratique de 11 00:00:45,650 --> 00:00:49,660 le client HTTP Angular dans notre application Angular. 12 00:00:49,660 --> 00:00:56,020 Regardons un peu les détails du client HTTP dans cette conférence. 13 00:00:56,020 --> 00:00:58,415 Comme on pouvait s'y attendre, 14 00:00:58,415 --> 00:01:02,975 Angular exploite le protocole HTTP pour permettre la communication entre 15 00:01:02,975 --> 00:01:08,000 notre client Angular et le serveur basé sur HTTP. 16 00:01:08,000 --> 00:01:11,820 La plupart des navigateurs modernes, généralement utilisés pour prendre en charge 17 00:01:11,820 --> 00:01:17,820 le XMLHttpRequest ou la façon XHR de communiquer avec le serveur. 18 00:01:17,820 --> 00:01:22,519 De plus en plus, les navigateurs adoptent l'API Fetch, 19 00:01:22,519 --> 00:01:26,900 qui est un remplacement moderne de XMLHttpRequest comme 20 00:01:26,900 --> 00:01:32,225 un moyen de communiquer entre le navigateur et le serveur. 21 00:01:32,225 --> 00:01:39,960 Angular exploite cela pour communiquer avec le serveur à l'aide du client HTTP. 22 00:01:39,960 --> 00:01:48,450 Nous allons examiner l'utilisation du client HTTP et comment nous pouvons utiliser HttpClientModule, 23 00:01:48,450 --> 00:01:52,425 dans notre application Angular pour activer la Communication Client-Serveur. 24 00:01:52,425 --> 00:01:56,150 Toute communication entre le client et le serveur comme on s'y attend, 25 00:01:56,150 --> 00:01:57,770 va être asynchrone par nature. 26 00:01:57,770 --> 00:02:00,410 Donc, ce qui signifie que votre client a besoin de 27 00:02:00,410 --> 00:02:03,470 pour attendre que les données soient livrées à partir du site du serveur. 28 00:02:03,470 --> 00:02:06,620 Par conséquent, votre client doit être configuré 29 00:02:06,620 --> 00:02:12,420 pour faire face à ce retard dans l'obtention des données. 30 00:02:12,420 --> 00:02:16,295 Dans le module précédent lui-même, 31 00:02:16,295 --> 00:02:19,910 nous avions déjà configuré nos applications clientes pour 32 00:02:19,910 --> 00:02:24,160 être en mesure de montrer le spinner de progression sur l'interface utilisateur, 33 00:02:24,160 --> 00:02:28,795 pour tenir l'utilisateur informé du fait qu'il y a un retard dans l'obtention des données, 34 00:02:28,795 --> 00:02:31,985 avant que la vue ne soit rendue. 35 00:02:31,985 --> 00:02:35,210 Cela vient à notre aide dans cette leçon, 36 00:02:35,210 --> 00:02:42,880 où nous devons évidemment faire face au retard d'obtention des données du site serveur. 37 00:02:42,880 --> 00:02:47,000 L'accès aux données dans notre application Angular, 38 00:02:47,000 --> 00:02:52,150 il est toujours préférable de déléguer cette responsabilité au service. 39 00:02:52,150 --> 00:02:56,450 Donc, nous laissons le service traiter l'interaction avec le serveur, 40 00:02:56,450 --> 00:03:02,795 et ensuite votre composant obtient les données en appelant les méthodes du service. 41 00:03:02,795 --> 00:03:08,405 Interaction de service de composant que nous avons déjà configurée dans le module précédent. 42 00:03:08,405 --> 00:03:09,970 Donc, tout ce que nous devons faire, 43 00:03:09,970 --> 00:03:16,700 est de mettre à jour nos services pour tirer parti du module HTTP pour communiquer avec le serveur, 44 00:03:16,700 --> 00:03:20,060 pour obtenir les données du serveur et ensuite, 45 00:03:20,060 --> 00:03:22,635 fournir les données au composant. 46 00:03:22,635 --> 00:03:26,645 Le serveur HTTP lui-même, 47 00:03:26,645 --> 00:03:30,980 retournera les données à notre client et 48 00:03:30,980 --> 00:03:37,245 notre module HTTP renvoie les données à notre service dans le suivi observable. 49 00:03:37,245 --> 00:03:40,010 Cette observable, sera ensuite traitée et 50 00:03:40,010 --> 00:03:43,030 puis retournée comme observable à notre composant. 51 00:03:43,030 --> 00:03:46,760 Cette partie que nous avons déjà configurée dans le module précédent. 52 00:03:46,760 --> 00:03:51,380 Donc, nous allons tirer parti de cela pour nous permettre de glisser rapidement 53 00:03:51,380 --> 00:03:56,315 la communication HTTP entre le client et le serveur, 54 00:03:56,315 --> 00:04:00,145 entre le service et le site du serveur, 55 00:04:00,145 --> 00:04:03,080 et ensuite le reste de l'infrastructure 56 00:04:03,080 --> 00:04:05,900 déjà en place dans notre application Angular 57 00:04:05,900 --> 00:04:12,010 peut facilement gérer la livraison de l'observable à notre composant, 58 00:04:12,010 --> 00:04:15,130 et le composant déjà abonné à cet observateur. 59 00:04:15,130 --> 00:04:18,200 L'effet supplémentaire que nous allons traiter, 60 00:04:18,200 --> 00:04:21,040 est comment gérer les erreurs. 61 00:04:21,040 --> 00:04:25,340 Nous en parlerons un peu plus en détail dans les diapositives ultérieures. 62 00:04:25,340 --> 00:04:27,625 Donc, comme je l'ai déjà mentionné, 63 00:04:27,625 --> 00:04:30,850 le client HTTP renvoie un observable. 64 00:04:30,850 --> 00:04:33,845 Donc, lorsque vous appelez le module HTTP, 65 00:04:33,845 --> 00:04:38,040 donc vous allez configurer votre service pour utiliser le module HTTP, 66 00:04:38,040 --> 00:04:40,295 et avec le module HTTP, 67 00:04:40,295 --> 00:04:46,290 il vous fournit plusieurs méthodes qui correspondent aux verbes get, 68 00:04:46,290 --> 00:04:49,800 put, post et delete du protocole HTTP. 69 00:04:49,800 --> 00:04:50,870 Ainsi, les méthodes get, put, post, 70 00:04:50,870 --> 00:04:54,960 et delete sont automatiquement supportées par le module HTTP. 71 00:04:54,960 --> 00:04:59,165 Donc, vous tirez parti de ces méthodes pour pouvoir exécuter 72 00:04:59,165 --> 00:05:03,330 ces opérations particulières sur le site du serveur. 73 00:05:03,330 --> 00:05:06,365 Ainsi, lorsque vous émettez un appel HTTP get, 74 00:05:06,365 --> 00:05:11,000 vous demandez que les données soient transmises du serveur au client. 75 00:05:11,000 --> 00:05:13,195 Le client HTTP à son tour, 76 00:05:13,195 --> 00:05:18,170 traitera l'observable qui est livré via le module HTTP Angular, 77 00:05:18,170 --> 00:05:22,470 , puis livrera ce observable à notre composant. 78 00:05:22,470 --> 00:05:25,550 Dans notre composant, nous souscrivons déjà 79 00:05:25,550 --> 00:05:28,340 à l'observable qui est livré par notre service, 80 00:05:28,340 --> 00:05:32,580 et donc traiter les données qui sont envoyées par l'observable, 81 00:05:32,580 --> 00:05:35,500 est assez simple pour nous. 82 00:05:35,500 --> 00:05:38,900 Si l'application Angular est 83 00:05:38,900 --> 00:05:43,705 communiquant avec un serveur qui retourne la réponse au format JSON, 84 00:05:43,705 --> 00:05:47,280 les clients HTTP Angular obtiennent la méthode elle-même 85 00:05:47,280 --> 00:05:51,750 analyse la réponse JSON du serveur dans un objet anonyme. 86 00:05:51,750 --> 00:05:58,070 Le client lui-même, ne sait pas exactement comment interpréter la forme de cet objet. 87 00:05:58,070 --> 00:06:04,220 Ainsi, nous pouvons aider le client HTTP en spécifiant la forme de l'objet, 88 00:06:04,220 --> 00:06:10,170 en spécifiant une déclaration d'une classe JavaScript, 89 00:06:10,170 --> 00:06:13,520 qui spécifie la forme de l'objet afin que la sortie 90 00:06:13,520 --> 00:06:17,025 de l'get puisse être consommée facilement par l'application. 91 00:06:17,025 --> 00:06:19,330 Donc, dans l'exercice, 92 00:06:19,330 --> 00:06:20,500 vous me verrez déclarer. 93 00:06:20,500 --> 00:06:23,560 Par exemple, nous allons dire this.http.get, 94 00:06:23,560 --> 00:06:27,695 et ensuite entre parenthèses angulaires, 95 00:06:27,695 --> 00:06:29,940 je spécifie plat là. 96 00:06:29,940 --> 00:06:31,555 Ainsi, de cette façon, 97 00:06:31,555 --> 00:06:37,400 les données entrantes pour la requête get du site serveur seront converties en 98 00:06:37,400 --> 00:06:41,660 un objet plat et pourront ensuite être consommées immédiatement 99 00:06:41,660 --> 00:06:47,185 par mon composant lorsqu'il met en page le contenu. 100 00:06:47,185 --> 00:06:48,990 Maintenant, si vous avez besoin, 101 00:06:48,990 --> 00:06:54,315 vous pouvez accéder à la réponse complète venant du site du serveur. 102 00:06:54,315 --> 00:06:57,810 Mais ce serait seulement dans des circonstances spécifiques, 103 00:06:57,810 --> 00:07:00,320 où vous avez besoin d'accéder, par exemple, 104 00:07:00,320 --> 00:07:05,820 les en-têtes du message de réponse HTTP entrant et ainsi de suite. 105 00:07:05,820 --> 00:07:08,300 Mais pour la plupart des fins, 106 00:07:08,300 --> 00:07:11,380 juste en déclarant la forme de l'objet, 107 00:07:11,380 --> 00:07:16,100 nous pouvons facilement obtenir les données JSON automatiquement analysées d'une manière 108 00:07:16,100 --> 00:07:21,410 qui peut être consommée par notre application Angular plus facilement. 109 00:07:21,410 --> 00:07:24,140 Comme on s'y attend, la communication 110 00:07:24,140 --> 00:07:27,845 entre le client et le serveur ne sera pas sans erreur. 111 00:07:27,845 --> 00:07:32,060 Les erreurs vont apparaître pour de nombreuses raisons différentes. 112 00:07:32,060 --> 00:07:36,740 Il se peut que la connexion ne soit pas établie entre le client et le serveur, 113 00:07:36,740 --> 00:07:40,130 c'est peut-être le fait que la réponse du serveur soit perdue, 114 00:07:40,130 --> 00:07:47,660 c'est peut-être le fait que le serveur est incapable de trouver les données que vous recherchez, 115 00:07:47,660 --> 00:07:54,005 et donc renvoie un 404 indiquant que le serveur 116 00:07:54,005 --> 00:08:00,515 ne peut pas fournir les données pour vous ou les données manquantes sur le site du serveur, etc. 117 00:08:00,515 --> 00:08:04,070 Donc, votre client doit faire face à toutes ces erreurs. 118 00:08:04,070 --> 00:08:05,745 Donc, dans notre service, 119 00:08:05,745 --> 00:08:09,200 , nous allons configurer notre service pour pouvoir attraper cette erreur. 120 00:08:09,200 --> 00:08:13,935 Donc, c'est là que l'utilisation de la méthode catch qui est prise en charge par le HTTP, 121 00:08:13,935 --> 00:08:17,870 nous permet d'attraper l'erreur, de traiter cette erreur, 122 00:08:17,870 --> 00:08:21,745 puis d'envoyer le message d'erreur à notre composant, 123 00:08:21,745 --> 00:08:24,920 , puis de laisser le composant traiter le message d'erreur dans 124 00:08:24,920 --> 00:08:28,340 de la façon dont il semblait approprié. 125 00:08:28,340 --> 00:08:30,485 Maintenant, dans notre composant par exemple, 126 00:08:30,485 --> 00:08:33,530 , nous allons afficher les informations d'erreur que nous 127 00:08:33,530 --> 00:08:36,980 avons obtenues à notre avis pour indiquer à l'utilisateur, 128 00:08:36,980 --> 00:08:40,755 qu'une erreur s'est produite dans l'obtention des données du site serveur. 129 00:08:40,755 --> 00:08:43,210 Donc, dans le service, 130 00:08:43,210 --> 00:08:45,015 nous devons traiter cette erreur. 131 00:08:45,015 --> 00:08:48,710 Maintenant, lorsque cette information d'erreur obtenue à partir de 132 00:08:48,710 --> 00:08:52,615 le site serveur via le client HTTP est traitée dans notre service, 133 00:08:52,615 --> 00:08:54,815 alors nous allons convertir cela en une chaîne, 134 00:08:54,815 --> 00:08:59,905 et cette chaîne sera transmise à notre composant en utilisant la méthode de throw observable. 135 00:08:59,905 --> 00:09:02,785 Donc, la méthode throw nous permet de lancer une erreur. 136 00:09:02,785 --> 00:09:05,770 Alors parce que dans notre composant, nous 137 00:09:05,770 --> 00:09:08,770 souscrivons à cet observable dans la méthode subscribe, 138 00:09:08,770 --> 00:09:10,520 alors vous devez faire face à l'erreur. 139 00:09:10,520 --> 00:09:12,505 Donc, dans la partie subscribe, 140 00:09:12,505 --> 00:09:17,120 plus tôt, nous avons vu une seule fonction étant spécifiée pour le subscribe, 141 00:09:17,120 --> 00:09:19,820 et qui traite du fonctionnement normal. 142 00:09:19,820 --> 00:09:21,490 Mais avec cela, 143 00:09:21,490 --> 00:09:27,270 nous pouvons également fournir une seconde fonction à laquelle l'erreur sera livrée. 144 00:09:27,270 --> 00:09:32,450 Donc, vous me verrez configurer la partie subscribe de mon composant 145 00:09:32,450 --> 00:09:38,480 en utilisant une deuxième fonction spécifiée dans la méthode subscribe, 146 00:09:38,480 --> 00:09:44,475 comme exemple illustré par ce code ici. 147 00:09:44,475 --> 00:09:47,780 De cette façon, l'erreur sera interceptée dans 148 00:09:47,780 --> 00:09:50,890 mon composant et ensuite message d'erreur approprié, 149 00:09:50,890 --> 00:09:54,380 informations seront remises à l'utilisateur dans la vue. 150 00:09:54,380 --> 00:10:00,825 Donc, nous verrons cela dans le cadre du deuxième exercice de cette leçon particulière. 151 00:10:00,825 --> 00:10:07,010 Avec cette compréhension rapide du client HTTP, 152 00:10:07,010 --> 00:10:11,335 nous allons maintenant passer aux exercices où nous utiliserons 153 00:10:11,335 --> 00:10:17,795 le client HTTP Angular fourni par le module HTTP de la bibliothèque HTTP Angular, 154 00:10:17,795 --> 00:10:22,740 pour nous permettre de communiquer avec notre serveur.