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 :

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.
É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.
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 :

typescript

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.

Requêtes HTTP avec HttpClient ​

Tout d'abord ​

L'interface User en TypeScript de la requête ​

Injecter HttpClient ​