Le module HTTP est un module optionnel d’Angular qui vous permet de requêter vos API à l’aide du protocole HTTP. Pour l’utiliser cela implique deux choses :

• La dépendence @angular/http doit être déclaré comme dépendance NPM.
• Le module doit être déclaré dans les métadonnées du décorateur @NgModule.

Angular a fait l’effort d’aligner ces versions pour qu’elles soient toutes identiques ( @angular/core,@angular/http,… ). Aussi respectez cela pour ne pas avoir de soucis !

Angular-CLI ajoute déjà pour vous ce module optionnel, il n’y a donc rien à faire !

Le module HTTP propose un service injectable principal : Http. Ce service dispose de méthodes vous permettant de dialoguer facilement avec une API REST. Chaque méthode permet de créer une requête utilisant XMLHttpRequest et le VERBE HTTP éponyme. Ainsi, la méthode post() exécutera une requête avec le verbe POST, put() utilisera le verbe PUT et ainsi de suite. Voici quelques exemples d’appels à une API pour vous familiariser avec ce service :
 

Pour rappel :

• Le verbe GET indique que l’on demande à récupérer une ressource
• Le verbe POST indique que l’on demande à ajouter une ressource
• Le verbe PUT indique que l’on souhaite mettre à jour une ressource
• Le verbe DELETE indique que l’on souhaite supprimer une ressource 

 

Exemple d’appel avec le verbe GET :

 

Par convention, on suffixe généralement nos variables Observables par un $ pour mieux les reconnaître.

Toutes les méthodes de ce service retourneront des Observables. Ce sont des Observables de type froid, cela veut donc dire que chaque souscription à l’observable exécutera une requête au serveur. Donc pour exécuter réellement la requête, il faudra un appel à la méthode subscribe() de votre observable. Nous verrons par la suite que vous pourrez laisser Angular faire cette étape dans certains cas. 

La méthode get() retourne un objet Response. Cet objet possède de nombreuses propriétés permettant de savoir si la requête est en error ( propriété ok ), le code de retour (status), et beaucoup d’autres. Elle possèdent surtout 4 méthodes permettant de récupérer le body de la Response : Vos données ! Généralement, avec une API REST, vous utiliserez la méthode json() que retourne un objet javascript représentant vos données. 

La notion de Response vient de l’API Fetch qui est à l’état expérimental. Cela explique que l’API Angular du module HTTP est à l’état expérimental. La norme est accessible sur le site de Mozzila ici. 

Doit-on se désinscrire de cet observable ? La réponse est non. Nous sommes dans le cas où la séquence d’observables est finie. Nous ne passerons donc pas la callBack onComplete() qui indiquera que la désinscription à bien été faite en interne.

Pour les nostalgiques, il est toujours possible de transformer vos Observables en Promesse, mais je vous encourage vivement à rester sur les Observables :

Exemple d’appel avec le verbe PUT :

La méthode put() prend trois paramètres : l’url à appeler, l’élément à mettre à jour, et des options. Lorsque vous envoyez des données à une API REST (dans notre cas article) en utilisant JSON.stringify, il est nécessaire d’indiquer dans les headers le content type (application/json) du corps de la request. En retour, vous obtenez un objet Response indiquant le résultat de votre requête. 

 

Exemple d’appel avec le verbe POST

Cette méthode est très similaire à la méthode put(). Dans notre exemple, elle retournera l’objet article via un Observable.

 

Exemple d’appel avec le verbe DELETE

 

Maintenant que vous êtes familier avec le service http, je vous propose de réaliser une première petite application qui va vous permettre de lister vos repositories GitHub via son API Rest.

 

Pour commencer, je vous propose de créer un nouveau projet, nommé prj-http-github, à l’aide d’Angular-CLI à l’aide de la commande : ng new prj-http-github

 

 

A ce stade, vous avez une application qui vous permet déjà d’utiliser le module HTTP, comme nous l’avons déjà vu :

 

 

 

La suite de cet article est disponible dans le livre Learn-Angular – Maîtriser les concepts du framework Angular pour développer des applications robustes.

 

Le livre est disponible sur