Fermer

avril 27, 2018

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 n'est pas assignable au type Observable .

Heureusement, le HttpClient a une façon agréable et simple de se débarrasser de ceci: nous pouvons ajouter une spécification de type à nos appels. Sur la ligne 15, nous pouvons ajouter juste après l'obtention. Nous pouvons faire la même chose à la ligne 19 mais avec . Cette syntaxe nous permet de spécifier le type de l'objet réponse. Assez maniable, hein? Les appels terminés ressemblent à ceci:

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

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

Nettoyer les importations

Enfin, faisons un dernier nettoyage. Grâce à l'API simplifiée, nous pouvons supprimer notre importation de l'opérateur map sur la ligne 6.

Vérifier que cela fonctionne

C'est tout ce que nous devons faire pour mettre à jour notre CustomerService ! Soyons sûrs que tout fonctionne encore.

Pour démarrer le serveur Express, qui est l'API servant nos données, ouvrez un terminal et exécutez:

 cd server && npm start

Ceci va naviguer vers le dossier server et démarrez notre serveur API.

Pour exécuter le serveur de développement Webpack, ouvrez un deuxième terminal et exécutez:

 cd public && npm run dev

Vous verrez que l'application est toujours bien regroupée. Vous pouvez maintenant passer au navigateur et aller à localhost: 9000 . Si vous cliquez sur l'onglet Clients, vous verrez que nous recevons toujours les données de nos clients:

Angular HTTP Client

Fantastique.

Maintenant, bien sûr, depuis que nous avons quitté le nouveau HttpClient au lieu de l'ancien, si nous essayons de cliquer sur l'onglet produits, nous aurons une erreur dans la console. C'est parce qu'il n'y a plus HttpModule dans l'application, et nous nous y attendions. Puisque cette mise à jour était si facile, cependant, allons-y et mettons à jour notre OrderService et ProductService comme moyen de nous souvenir de ces étapes

Update the Order Service

commence par le OrderService ( /orders/order.service.ts ). Ce service est très similaire au CustomerService .

Tout d'abord, modifions simplement notre instruction d'importation pour utiliser HttpClient et ajoutons le / common :

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

Ensuite, nous allons changer notre instance de Http dans le constructeur en HttpClient et supprimer la ligne 13 encore:

 constructeur (privé http: HttpClient) {}

Maintenant, débarrassons-nous de nos instances de .map et .json . Donc, nous allons supprimer le .json des lignes 17 et 28 ( getOrders et getOrdersByCustomer qui sont toujours des promesses), et nous allons supprimer le .map des lignes 22 et 32 ​​( getOrder et postOrder qui sont des observables).

Cela laisse juste spécifier nos types. Sur les lignes 15 et 25, nous allons ajouter notre type après obtenir . Sur les lignes 21 et 31, nous allons spécifier après obtenir et poster . Nos appels terminés ressembleront à ceci:

 getOrders (): Promise  {
  return this.http.get  ('/ api / orders')
                  .promettre()
                  .then ((réponse) => réponse);
}

getOrder (id): Observable  {
  return this.http.get  (`/ api / orders / $ {id}`);
}

getOrdersByCustomer (customerId): Promesse  {
  return this.http.get  (`/ api / clients / $ {customerId} / orders`)
                  .promettre()
                  .then ((réponse) => réponse);
}

postOrder (ordre): Observable  {
  return this.http.post  ('/ api / orders', ordre);
}

Enfin, supprimons simplement notre importation de map en haut de notre fichier.

Si vous revenez au navigateur, notre onglet Orders devrait maintenant être travail:

Client HTTP "title =" httpclient2

Excellent! Terminons ceci en mettant à jour le ProductService .

Mettez à jour le Product Service

Nous avons juste un service en plus – le ProductService ( /products/product.service .ts ). Maintenant, vous êtes probablement un vieux pro à ce sujet!

Tout comme auparavant, réparons d'abord notre importation sur la ligne 2:

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

Puis mettre à jour notre constructeur:

 constructeur (privé http: HttpClient) {}

Vous rappelez-vous quelle est la prochaine étape? C'est vrai – nous pouvons supprimer notre carte s et json s, donc nous pouvons supprimer les lignes 16 et 21. Ensuite, supprimez le .json à la ligne 25. [19659005] Dans ce service, nous spécifions explicitement un type de retour sur notre appel getProduct donc sur la ligne 19, nous spécifierons un type de après obtenir . Nos appels ressemblent à ceci maintenant:

 getProducts () {
  renvoyez this.http.get ('/ api / products');
}

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

postProduct (produit) {
  return this.http.post ('/ api / products', produit)
                  .promettre()
                  .then ((réponse) => réponse);
}

Si vous avez gardé votre serveur de développement Webpack en arrière-plan, vous remarquerez une erreur maintenant dans votre terminal:

 L'objet Type n'est pas assignable pour en taper

Je dois vous garder dessus vos orteils, non? En fin de compte nous devons spécifier le type après notre obtenir sur la ligne 14. Par défaut, les méthodes HttpClient retournent des objets simples. Voici l'appel terminé getProducts :

 getProducts () {
  renvoyez this.http.get  ('/ api / products');
}

Enfin, supprimons simplement notre importation de l'opérateur map de la ligne 6.

Allons voir le navigateur et cliquez sur l'onglet Products. Vous devriez maintenant voir ceci:

Client HTTP "title =" httpclient3

Vous pouvez également cliquer sur l'onglet Commandes et sélectionner un Ordre pour voir l'écran Détail de la commande. L'écran Détails de la commande utilise les informations des trois services, c'est donc un excellent test final. Jetons un coup d'œil à la première commande de Sally Sparrow:

Client HTTP "title =" httpclient4

Oui! Tout fonctionne. Beau travail!

Vous pouvez voir tout le code final dans ce commit sur le repo.

Conclusion

Le nouveau HttpClient d'Angular est une grande amélioration sur l'ancien Http . Une interface plus simple et de nouvelles fonctionnalités en font un plaisir d'écrire nos services de données. Dans cet article, vous avez appris comment prendre des services et les mettre à jour pour tirer parti de toutes ces améliorations. Si vous voulez approfondir votre compréhension de la nouvelle API et même comment tester ces services, assurez-vous de consulter la documentation officielle .

On se voit la prochaine fois!

Les commentaires sont désactivés en mode prévisualisation.
[ad_2]
Source link

Copyright arcoptimizer.com 2025 article@arcoptimizer.com