Requêtes HTTP avec HttpClient

HttpClientModule

Pour utiliser le service HTTP dans Angular, vous pouvez d'abord inclure HttpClientModule dans votre application en l'ajoutant à la liste des imports dans votre fichier de module principal (par exemple, app.module.ts).

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  // ... other imports
  imports: [
    // ... other imports
    HttpClientModule,
  ],
})
export class AppModule { }

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  // ... other imports
  imports: [
    // ... other imports
    HttpClientModule,
  ],
})
export class AppModule { }

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;
  address: {
    street: string;
    suite: string;
    city: string;
    zipcode: string;
    geo: {
      lat: string;
      lng: string;
    }
  };
  phone: string;
  website: string;
  company: {
    name: string;
    catchPhrase: string;
    bs: string;
  };
}

// user.interface.ts
interface User {
  id: number;
  name: string;
  username: string;
  email: string;
  address: {
    street: string;
    suite: string;
    city: string;
    zipcode: string;
    geo: {
      lat: string;
      lng: string;
    }
  };
  phone: string;
  website: string;
  company: {
    name: string;
    catchPhrase: string;
    bs: 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 en le spécifiant dans la liste des dépendances du constructeur du service.

import { HttpClient, Observable } from '@angular/common/http';

@Injectable({
  providedIn: 'root',
})
export class UserService {
  constructor(private http: HttpClient) { }

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>('https://jsonplaceholder.typicode.com/users');
  }
}

import { HttpClient, Observable } from '@angular/common/http';

@Injectable({
  providedIn: 'root',
})
export class UserService {
  constructor(private http: HttpClient) { }

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>('https://jsonplaceholder.typicode.com/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 } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {
  users: User[] = [];

  constructor(private userService: UserService) { }

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

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

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {
  users: User[] = [];

  constructor(private userService: UserService) { }

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

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, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-my-component',
  template: '...'
})
export class MyComponent implements OnInit, OnDestroy {
  private subscription!: Subscription;

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.subscription = this.http.get('/my-api-endpoint')
      .subscribe(data => {
        // Faites quelque chose avec les données
      });
  }

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

import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-my-component',
  template: '...'
})
export class MyComponent implements OnInit, OnDestroy {
  private subscription!: Subscription;

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.subscription = this.http.get('/my-api-endpoint')
      .subscribe(data => {
        // Faites quelque chose avec les données
      });
  }

  ngOnDestroy(): void {
    if (this.subscription) {
      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 ​

HttpClientModule ​

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

Injecter HttpClient ​