HttpClient, une refonte du module historique

L'arrivée de la version 4.3 d'Angular sonne (enfin) l'arrivée d'un nouveau client HTTP ! Rassurez-vous, le client actuel existe toujours dans le package '@angular/http'. Ce nouveau client se situe dans un autre package : '@angular/common/http'. 

Cette nouvelle mouture se base sur un bien meilleur design et des nouvelles fonctionnalités intéressantes; Nous allons voir cela de suite !

 

 

Une API plus typée

Dans sa première mouture, le HttpModule ne proposait pas de typage générique lors de vos appels  http. Ainsi, un appel permettant de récupérer une série d'articles ressemblait à ceci : 

 

 

Le typage se faisait au niveau des opérateurs RxJS. Il est maintenant possible de définir dès le début le type d'objet que l'on attend : 

 

 

Si vous avez fait attention, une autre nouveauté est apparue. Il n'est plus nécessaire de faire appel à la méthode json() sur votre Response et pour cause, la méthode get() ne retourne plus une Response mais directement l'objet attendu. Par défaut, Angular s'attend à ce que votre réponse soit du json. Si vous attendez autre chose, il est toujours possible de le préciser comme ceci : 

 

 

Les types de parser possibles sont arraybuffer, blob, json, text

 

 

Un support complet des verbes HTTP

Comme son prédécesseur, HttpClient supporte les verbes HTTP lors de l'exécution de vos requêtes. Le service HttpClient propose ainsi les méthodes get, post, put, delete, head et patch. A cela s'ajoute la méthode jsonp() qui permet de requêter un backend JSONP (il est nécessaire d'ajouter le module HttpClientJsonpModule pour bénéficier des bons intercepteurs).

 

Récupération de données

Nous avons déjà vu comment réaliser un appel de type GET. Voyons maintenant comment ajouter des paramètres à votre requête pour récupérer un article précis grâce à l'objet HttpParams :

 

 

Cela aura pour effet d'appeler l'url api.learn-angular.fr/article?id=13

 

Attention : le second paramètre de la méthode get() attend une propriété nommée params. Comme Typescript supporte l'ES2015, il est possible d'écrire {params} au lieu de {params: params}

 

De la même façon, vous pouvons passer des Headers spécifiques à votre requête grâce à la propriété headers de ce même objet de configuration :

 

 

Envoi de données

Pour l'envoi de données à votre backend, la méthode post() est toujours préconisée. Grâce à elle, vous allez pouvoir envoyer un simple objet JavaScript. Voyons cela :

 

 

Comme pour la méthode get(), le second paramètre vous permet de passer des paramètres et des headers à votre requête.

 

 

Récupération des erreurs

Les appels HTTP sont source de nombreuses erreurs dues à l'usage du réseau, du backend et même du frontend. Il est donc nécessaire de gérer ces cas grâce à la callback d'erreur de la souscription de votre Observable. La réponse étant typée, il est également possible de déterminer s'il s'agit d'une erreur générée côté client ou côté serveur :

 

Les intercepteurs

 La grande nouveauté du module HttpClient est l'introduction des intercepteurs. A l'instar d'AngularJS, vous allez maintenant pouvoir mettre en place des intercepteurs de Request ou de Reponse pour ajouter des headers, transformer votre Response, …

 

Intercepteur de Request

Ajouter d'un header d'authentification afin d'accéder au backend peut se faire grâce à un intercepteur. Plutôt que de passer le header à chaque requête, la création d'un intercepteur va vous permettre de le passer automatiquement à chaque requête. Commençons par créer ce fameux intercepteur qui se placera au niveau de la Request en implémentant l'interface HttpInterceptor :

 

 

Vous pouvez remarquer que nous utilisons une méthode clone() pour ajouter un nouvel header. En effet, l'objet Request est quasi immutable, il est donc nécessaire de le cloner à chaque modification. Cet aspect immutable est nécessaire pour pouvoir rejouer plusieurs fois une même requête dans les mêmes conditions. 

Pour que le chaînage des intercepteurs fonctionne, il ne faut pas oublier de passer votre nouvelle Request à l'objet HttpHandler via sa méthode handle().

Un raccourci intéressant existe pour réaliser le clonage et l'ajout d'un nouveau header :

 

 

Une fois votre intercepteur créé, il va falloir le déclarer au niveau de votre module HttpClient. Pour réaliser cela, un provider spécifique est fourni par notre nouveau module : HTTP_INTERCEPTORS. Il s'agit d'un multi-provider et s'utilise comme ceci : 

 

 

Si vous souhaitez ajouter un autre intercepteur, il vous suffira d'ajouter sa déclaration à la suite comme ceci : 

 

 

Intercepteur de Response

Les intercepteurs peuvent finalement gérer la Request et à Response ensemble. Ainsi, pour récupérer la Response, nous pouvons nous placer à la suite de notre handler grâce à l'opération RxJS do(). Cet opérateur à la particularité de permettre la réalisation d'un traitement sans affecter le flux : 

 

 

Progress events

Lorsque vous désirez réaliser un upload de fichier, il pourra être nécessaire de récupérer les évènements de progression disponibles via l'objet XMLHttpRequest. Pour activer ce mode, il vous faut valoriser à true la propriété reportProgress :

 

 

ll ne vous reste plus qu'à informer en temps réel votre utilisateur de la progression de l'upload.

 

Conclusion

Ce nouveau module est fort appréciable et nous permet enfin de créer de véritables intercepteurs sans tordre le cou au HttpModule. Je vous conseille vivement de rapidement migrer vers ce module. Effectivement, les jours de HttpModule sont comptés.

Merci !

 

William Koza

William Koza

Consultant Indépendant chez  
Passionné par la conception et le développement logiciel, j’ai rapidement pris le rôle de Technical Leader lors de mes premiers projets. Ces expériences ont ainsi pu me faire accéder à des rôles d’architecte dans des projets d’envergure. Aujourd'hui, j'exerce mon métier en tant qu'indépendant, et toujours avec la même passion.
William Koza

Les derniers articles par William Koza (tout voir)