Requêtes HTTP avec HttpClient

Tout d'abord

Avant toute chose, vous devez vous assurer que le service HttpClient est importé dans votre application. Si ce n'est pas le cas, vous pouvez le faire en ajoutant provideHttpClient() à la liste des fournisseurs de votre application.

Allez dans src/app/app.config.ts:

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient()
  ]
};

L'interface User en TypeScript de la requête

Voici un exemple d'interface qui pourrait être utilisée pour représenter les utilisateurs de cette URL:

// user.interface.ts
interface User {
  id: number;
  name: string;
  username: string;
  email: string;
}

Cette interface définit les propriétés des utilisateurs qui peuvent être retournés par l'URL https://jsonplaceholder.typicode.com/users, telles que l'identifiant de l'utilisateur, son nom, son nom d'utilisateur, son adresse électronique, etc. Vous pouvez utiliser cette interface pour stocker et manipuler les données des utilisateurs de cette URL dans votre application TypeScript.

Injecter HttpClient

Vous pouvez injecter HttpClient dans un service:

// @filename: user.interface.ts
export interface User {
  id: number;
  name: string;
  username: string;
  email: string;
}

// @filename: user.service.ts
// ---cut---
import { Injectable, inject, signal } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, tap } from 'rxjs';
import { User } from './user.interface';

@Injectable({
  providedIn: 'root',
})
export class UserService {
  private http = inject(HttpClient);
  private users = signal<User[]>([])
  readonly url = 'https://jsonplaceholder.typicode.com/users';

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.url).pipe(
      tap(users => this.users.set(users))
    );
  }
}

Vous pouvez ensuite utiliser ce service dans un composant pour récupérer la liste d'utilisateurs et l'afficher dans le composant en utilisant la méthode subscribe de l'objet Observable retourné par le service.

import { Component, OnInit, inject } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user-list',
  standalone: true,
  template: `
    <ul>
      @for (user of users() ; track user.id) {
        <li>{{ user.name }}</li>
      }
    </ul>
  `
})
export class UserListComponent implements OnInit {
  private userService = inject(UserService);
  users = this.userService.users;

  ngOnInit() {
    this.userService.getUsers().subscribe();
  }
}

Pourquoi faire la requête dans ngOnInit dans Angular ?

L'utilisation de la méthode ngOnInit dans Angular est recommandée pour les opérations d'initialisation qui ne doivent être effectuées qu'une seule fois au cours du cycle de vie d'un composant. Cela permet de s'assurer que les données requises pour le composant sont disponibles avant que celui-ci ne soit affiché à l'écran.

En faisant la requête dans la méthode ngOnInit, vous pouvez être sûr que les données sont chargées avant que le composant ne soit rendu, ce qui évite des erreurs potentielles lors de l'affichage de données manquantes ou non actualisées. Cela peut également aider à améliorer les performances en évitant d'exécuter des opérations inutiles ou coûteuses en temps d'exécution.

Faut il se désinscrire à la requête dans Angular ?

En Angular, les observables issus du package HttpClient complètent automatiquement lorsque la requête est terminée. Cela signifie que vous n'avez pas besoin de vous désinscrire explicitement pour éviter les fuites de mémoire dans ce scénario précis.

Concernant l'arrêt des requêtes HTTP en cours lors du changement de route, cela peut être important pour les raisons suivantes :

1. Performance : Cela évite d'exécuter des requêtes inutiles si l'utilisateur change de route avant qu'une requête ne soit terminée.

2. Éviter les erreurs inattendues : Si une requête HTTP est toujours en cours et que l'utilisateur change de route, la requête pourrait tenter de mettre à jour une partie de l'application qui n'existe plus ou qui a changé, entraînant des erreurs.

3. Réduction de l'utilisation des ressources : Annuler une requête HTTP inutile peut également aider à réduire l'utilisation des ressources côté serveur et côté client.

Pour annuler les requêtes HTTP lors du changement de route, vous pouvez utiliser l'opérateur takeUntil avec un Subject qui émet une valeur lors de la destruction du composant (par exemple, dans la méthode ngOnDestroy).

Voici un exemple de comment cela peut être fait :

import { Component, OnInit, inject } from '@angular/core';
import { Subscription } from 'rxjs';
import { UserService } from './user.service';

@Component({
  selector: 'app-user-list',
  standalone: true,
  template: `
    <ul>
      @for (user of users() ; track user.id) {
        <li>{{ user.name }}</li>
      }
    </ul>
  `
})
export class UserListComponent implements OnInit {
  private userService = inject(UserService);
  private subscription!: Subscription;
  users = this.userService.users;

  ngOnInit() {
    this.subscription = this.userService.getUsers().subscribe();
  }

  ngOnDestroy(): void {
    this.subscription?.unsubscribe();
  }
}

Dans cet exemple, si le composant est détruit (par exemple lors du changement de route) avant que la requête HTTP ne soit terminée, l'observable sera désinscrit et la requête sera annulée.

Les différents types de requêtes HTTP

Voici les principales méthodes HTTP disponibles avec HttpClient :

Méthode	Description	Exemple d'utilisation
GET	Récupérer des données	Obtenir la liste des utilisateurs
POST	Créer une nouvelle ressource	Créer un nouvel utilisateur
PUT	Mettre à jour une ressource existante	Modifier un utilisateur existant
DELETE	Supprimer une ressource	Supprimer un utilisateur
PATCH	Modifier partiellement une ressource	Mettre à jour uniquement le nom d'un utilisateur

Voici des exemples pour chaque type de requête :

user.service.ts

import { Injectable, inject, signal } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, tap } from 'rxjs';
import { User } from './user.interface';

@Injectable({
  providedIn: 'root',
})
export class UserService {
  private http = inject(HttpClient);
  private users = signal<User[]>([]);
  readonly url = 'https://jsonplaceholder.typicode.com/users';

  // GET - Récupérer tous les utilisateurs
  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.url).pipe(
      tap(users => this.users.set(users))
    );
  }

  // GET - Récupérer un utilisateur par son ID
  getUser(id: number): Observable<User> {
    return this.http.get<User>(`${this.url}/${id}`);
  }

  // POST - Créer un nouvel utilisateur
  createUser(user: Omit<User, 'id'>): Observable<User> {
    return this.http.post<User>(this.url, user);
  }

  // PUT - Mettre à jour un utilisateur
  updateUser(user: User): Observable<User> {
    return this.http.put<User>(`${this.url}/${user.id}`, user);
  }

  // PATCH - Mettre à jour partiellement un utilisateur
  patchUser(id: number, changes: Partial<User>): Observable<User> {
    return this.http.patch<User>(`${this.url}/${id}`, changes);
  }

  // DELETE - Supprimer un utilisateur
  deleteUser(id: number): Observable<void> {
    return this.http.delete<void>(`${this.url}/${id}`);
  }
}

Différence entre PUT et PATCH

• PUT est utilisé pour remplacer complètement une ressource. Vous devez envoyer toutes les propriétés de l'objet.
• PATCH est utilisé pour modifier partiellement une ressource. Vous pouvez envoyer uniquement les propriétés à modifier.

Gestion des erreurs

N'oubliez pas de gérer les erreurs HTTP dans votre application. Vous pouvez utiliser l'opérateur catchError de RxJS :

import { catchError } from 'rxjs/operators';

getUsers(): Observable<User[]> {
  return this.http.get<User[]>(this.url).pipe(
    tap(users => this.users.set(users)),
    catchError(error => {
      console.error('Erreur lors de la récupération des utilisateurs', error);
      throw error;
    })
  );
}