Appels HTTP plus simples et plus

HttpClient introduit un moyen plus simple de faire des appels HTTP et un tas de nouvelles fonctionnalités. Dans ce post, nous allons creuser dans les avantages et comment vous pouvez mettre à jour votre application.

Une des meilleures choses à propos d'Angular est qu'il s'agit d'un écosystème en constante évolution. L'équipe Angular travaille dur pour écouter les utilisateurs et incorporer les commentaires dans le nouveau développement – tout en étant conscient de ne pas ajouter les changements de rupture trop rapidement. Le nouveau HttpClient en est un bon exemple.

Quoi de neuf?

Ajouté dans Angular 4.3, HttpClient introduit un moyen plus simple de faire des appels HTTP et tout un tas de nouvelles fonctionnalités. Il commence par HttpClientModule qui se trouve dans @ angular / common / http . Ce nouveau module remplace HttpModule (et donc plus besoin de @ angular / http !). HttpClient propose une API simplifiée, des fonctions de testabilité améliorées, des objets de requête et de réponse typés, une gestion simplifiée des erreurs et bien plus encore. Il existe également des API Observable améliorées. Pas besoin de carte votre réponse à JSON plus – HttpClient fait cela pour vous! Enfin, l'une des meilleures nouvelles fonctionnalités est le retour des intercepteurs HTTP, qui étaient extrêmement populaires dans AngularJS pour des choses comme l'ajout d'une authentification aux demandes sortantes. Pour plus d'informations sur les nouvelles fonctionnalités, vous pouvez lire la documentation officielle mise à jour

Heureusement, le vieux Http existe toujours à côté du nouveau HttpClient dans Angular 5, ce qui nous permet de mettre à jour nos services progressivement. Pour cela, apprenons comment mettre à jour un service pour utiliser le nouveau HttpClient !

The Sample Project

Pour suivre, cloner l'exemple de projet pour mon cours, Mise à niveau d'AngularJS (un cours vidéo complet sur la mise à niveau d'AngularJS vers Angular). Vous pouvez consulter ce commit:

 git checkout 6e09b071be9badd5bf3d0140f4a76c7ee0e880f6 

A ce stade du projet, nous utilisons Angular 4. Vous pouvez soit vous assurer que Angular 4.3+ s'installe pour vous (vous devrez peut-être bricoler avec le package.json pour être sûr), ou vous pouvez copier et coller le plus récent package.json du projet pour utiliser Angular 5.

Ensuite, lancez simplement npm ou yarn installe à l'intérieur des dossiers public et server pour commencer.

Basculer vers le nouveau HttpClientModule

Commençons à utiliser le nouveau HttpClient dans notre projet

Import dans NgModule

Pour utiliser le nouveau HttpClient nous devons d'abord l'importer dans notre NgModule . Ouvrons app.module.ts . Dans une grande application, nous voudrions ajouter le nouveau module à côté de l'ancien afin de ne rien casser. Comme il s'agit d'une petite application de démonstration avec seulement quelques services, nous allons simplement remplacer HttpModule par le nouveau HttpClientModule sur la ligne 10. Nous allons également changer l'emplacement de la importer à @ angular / common / http . Cela ressemblera à ceci:

 import {HttpClientModule} de '@ angular / common / http'; 

Enlever l'ancien paquet

Puisque nous changeons juste le froid, employons également ce temps pour mettre à jour nos fichier package.json . Encore une fois, si vous migrez une application volumineuse, vous voudrez probablement le faire de manière incrémentielle et ne pas l'échanger une seule fois. Tout ce que nous devons faire est d'aller à la ligne 19 et supprimer notre dépendance sur @ angular / http .

C'est tout ce que nous devons faire pour commencer à utiliser le nouveau HttpClient alors Mise à jour d'un service

Mise à jour d'un service

Maintenant que nous utilisons le nouveau HttpClient dans notre projet, travaillons sur la mise à jour de notre CustomerService ( /customers/customer.service.ts). Vous trouverez que le nouveau HttpClient est beaucoup plus simple et facile à utiliser. Pour mettre à jour ce service, il suffit de faire quelques choses.

Mettre à jour l'import

Nous devons d'abord importer HttpClient et abandonner l'objet Response sur la ligne 2 Ensuite, nous devons changer notre importation de @ angular / http à @ angular / common / http . Nous finirons par ceci:

 import {HttpClient} de '@ angular / common / http'; 

Mettre à jour le constructeur

Ensuite, nous pouvons mettre à jour notre constructeur. Tout d'abord, modifions notre instance de Http sur la ligne 12 à HttpClient . Nous pouvons laisser le nom de la variable d'instance en tant que Http . Nous pouvons également nettoyer un peu le constructeur. Puisque nous utilisons le mot-clé privé nous ne devons pas également définir this.http égal à Http . Le mot-clé private fait cela pour nous, donc nous pouvons supprimer la ligne 13 tout à fait. Voici notre constructeur achevé:

 constructeur (private http: HttpClient) {} 

Mettre à jour les appels

Profitons maintenant de l'API plus simple que fournit le HttpClient . Premièrement, nous pouvons supprimer .map de getCustomers et getCustomer . Le nouveau HttpClient ne nécessite plus de cartographier notre réponse à JSON – c'est juste ce qu'il nous faut! Ainsi, nous pouvons supprimer les lignes 16 et 20. Nos appels ressembleront à ceci:

 getCustomers (): Observable  {
  return this.http.get ('/ api / clients');
}

getCustomer (id): Observable  {
  renvoyez this.http.get (`/ api / customers / $ {id}`);
} 

De même, nous pouvons également supprimer le .json sur la ligne 25, donc postCustomer ressemblera à ceci:

 postCustomer (client): Promise  {
  return this.http.post ('/ api / clients', client)
                  .promettre()
                  .then ((données) => données);
} 

Spécifier les types de réponse

Si vous utilisez Visual Studio Code, vous devriez voir quelques gribouillis rouges indiquant qu'IntelliSense est en colère contre nous. Si vous passez la souris sur les gribouillis rouges, vous pouvez voir une erreur qui indique que le type Observable