Comment faire une requête HTTP POST ou GET avec Angular ?

En utilisant le framework Angular, on peut effectuer des requêtes HTTP vers une API d'un site web. Il faut pour cela faire appel à des modules particuliers du framework. On peut faire également appel à la librairie Rxjs et à la programmation réactive pour effectuer ces requêtes. La version 6 a apporté un certain nombre de nouveautés. Si vous utilisez une version antérieure du framework, il faudra modifier en partie le code.

Pour utiliser les requêtes HTTP, il convient d'importer les modules nécessaires dans votre application. Le module "HttpClient" est le plus important, c'est lui qui permet d'effectuer des requêtes HTTP. Le module "HttpParams" sert à paramétrer les requêtes et les modules "HttpErrorHandler" et "HandleError" permettent de gérer les erreurs. Pour utiliser les observables, il faut importer la librairie depuis "rxjs". Le module "catchError" va permettre de capter les erreurs dans les observables.

import { HttpClient, HttpParams } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';
import { HttpErrorHandler, HandleError } from '../http-error-handler.service';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';

Les éléments de la classe permettant d'envoyer des requêtes HTTP sont à instancier dans le constructeur de votre classe.

export class HeroesService {
  urlApi = 'http://www.monsite.fr';  // URL de l'API
  private handleError: HandleError;
  constructor(
    private http: HttpClient,
    httpErrorHandler: HttpErrorHandler) {
    this.handleError = httpErrorHandler.createHandleError('HeroesService');
  }
…

Pour effectuer des requêtes, il faut simplement appeler la méthode "get()" de la classe "HttpClient". On déclare le type de données attendu par la requête entre chevrons. Le paramètre de la méthode est l'URL de l'API avec laquelle on communique. On peut ensuite enchaîner les méthodes avec la méthode "pipe()" de la librairie "rxjs". Cela permet notamment de gérer les erreurs.

getObjet (): Observable<MaClasse[]> {
return this.http.get<MaClasse[]>(this.urlApi)
  .pipe(
    catchError(this.handleError('getObjet', []))
  );
}

Les requêtes POST sont envoyées par la méthode "post()". Elle accepte en plus du type de retour attendu et de l'URL de l'API, un paramètre contenant les données à envoyer à l'API ainsi que des entêtes à ajouter à la requête. Ces entêtes peuvent notamment gérer l'authentification à l'API.

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Authorization': 'mon-jeton'
  })
};
ajouterMaClasse (monObjet: MaClasse): Observable<MaClasse> {
 return this.http.post<MaClasse>(this.urlApi, monObjet, httpOptions)
   .pipe(
     catchError(this.handleError('ajouterMaClasse', monObjet))
   );
}

La version 6 de la librairie RxJs a apporté un grand nombre de modifications dans la version 6 d'Angular. Si vous utilisez une version antérieure du framework, il faut modifier le nom de certaines méthodes appelées :

• "tap" se nommait auparavant "do";
• "catch" est l'ancien nom de "catchError";
• "switchAll" se nommait simplement "switch";
• "finaliez" était appelée avec le nom "finaly".

Il y a également des modifications majeures dans les imports. Nous vous invitons à consulter la documentation des anciennes versions de RxJs : https://reactive.how/rxjs/explorer.