26. Effectuer des requêtes GET

Les requêtes GET sont utilisées pour récupérer des données depuis le serveur. La méthode HttpClient.get() gère cela.

Typer la réponse

Définissez toujours une interface pour la réponse attendue de l'API. Cela tire parti de la force de TypeScript et assure la sécurité du typage pour les données que nous récupérons.

typescript interface Post { userId: number; id: number; title: string; body: string; }

// data.service.ts import { HttpClient } from '@angular/common/http';

// ... à l'intérieur de la classe DataService

getPosts() { // Spécifiez le type attendu <Post[]> dans le paramètre générique return this.http.get<Post[]>('https://jsonplaceholder.typicode.com/posts'); }

S'abonner dans le composant

Comme getPosts() renvoie un Observable, nous devons nous y abonner pour exécuter la requête et gérer les données à leur arrivée.

typescript // post-list.component.ts import { Post } from './data.service'; import { DataService } from './data.service';

export class PostListComponent implements OnInit { posts: Post[] = [];

constructor(private dataService: DataService) { }

ngOnInit(): void { this.dataService.getPosts().subscribe({ next: (data) => { // Gestion de la récupération réussie des données this.posts = data; }, error: (err) => { // Gestion des erreurs console.error('Erreur lors de la récupération :', err); }, complete: () => { // Gestion de la complétion (optionnel) console.log('Récupération des articles terminée.'); } }); } }

Note sur le désabonnement : Pour les Observables qui se terminent (comme ceux renvoyés par HttpClient), le désabonnement manuel n'est pas strictement nécessaire. Cependant, pour les Observables à longue durée de vie (comme les timers ou les événements du routeur), le désabonnement dans ngOnDestroy est obligatoire pour éviter les fuites de mémoire.