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 !
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.
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).
Table des matières
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.
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 :
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 :
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.
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 !