Comment faites-vous lorsque vous devez effectuer plusieurs requêtes HTTP et attendre la réponse de toutes les requêtes avant de continuer ?

Eh bien, une des solutions possibles est d'utiliser l'opérateur RxJS forkJoin. Il permet de combiner plusieurs observables en un seul, attendant que tous les observables se terminent avant de commencer à émettre.

Voici quelques avantages que l'opérateur forkJoin apporte à votre application, au cas où vous doutez encore de son utilité 😌😎 :

• Performance : En envoyant plusieurs requêtes HTTP en parallèle, vous économisez du temps de traitement et améliorez la performance globale de votre application.

• Simplicité : Gérer plusieurs observables individuellement peut rapidement devenir complexe forkJoin simplifie ce processus en centralisant la logique d'attente et de traitement des réponses. Perso, je ne demande pas mieux 😌.

• Fiabilité : En attendant que toutes les requêtes se terminent avant de traiter les données, vous minimisez le risque d'erreurs liées à des requêtes incomplètes ou mal ordonnées.

Assez parlé, je vous montre comment je procède lorsque je suis dans un contexte où l'utilisation de forkJoin est appropriée.

Supposons que nous sommes sur un tableau de bord et souhaitons obtenir d'une API les derniers utilisateurs, les articles et les commentaires créés sur une application X. On pourrait avoir un composant de tableau de bord comme ceci

import { Component, OnInit,signal } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { forkJoin } from 'rxjs';
import {User, Article,Comment} from '../models'; 

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  users!:User[];
  articles!: Article[];
  comments!: Comment[];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    const users$ = this.http.get<User[]>('https://api.example.com/users');
    const articles$ = this.http.get<Article[]>('https://api.example.com/articles');
    const comments$ = this.http.get<Comment[]>('https://api.example.com/comments');

    forkJoin({
        users:users$, 
        articles:articles$, 
        comments:comments$
    }).subscribe({
        next: (responses) => {
          this.users = responses.users.data;
          this.articles = responses.articles.data;
          this.comments = responses.comments.data;
        },
        error: (error) => {
            console.error('Erreur lors de la récupération des données', error);
        },
        complete: () => {
            // Fermer le loader ou effectuer toute autre 
           //action de nettoyage ici
        },
      })
  }
}

En utilisant forkJoin, nous pouvons attendre que ces trois requêtes se terminent avant de traiter les données, garantissant ainsi que notre application agit de manière cohérente et fiable.

Conclusion

Enfin, nous sommes à la fin de cette découverte de l'opérateur forkJoin.

ForkJoin est un opérateur puissant et flexible dans le cadre de l'utilisation de RxJS avec Angular. Il offre une manière efficace et organisée de gérer et de synchroniser plusieurs requêtes HTTP, contribuant ainsi à une meilleure performance et à une expérience utilisateur fluide.😌😌

Source

https://www.learnrxjs.io/learn-rxjs/operators/combination/forkjoin

https://www.learnrxjs.io/

https://angular.dev/