concatMap - Exécution séquentielle

L'opérateur concatMap transforme chaque valeur du flux d'entrée en un Observable et les exécute séquentiellement. Il ne démarre pas l'Observable suivant tant que le précédent n'est pas terminé.

🔰 Syntaxe de base et utilisation

import { of } from 'rxjs';
import { concatMap, delay } from 'rxjs';

of('A', 'B', 'C').pipe(
  concatMap(value =>
    of(`${value} terminé`).pipe(delay(1000))
  )
).subscribe(console.log);

// Sortie (dans l'ordre) :
// A terminé
// B terminé
// C terminé

• Chaque valeur est transformée en un Observable.
• L'Observable suivant ne s'exécute qu'après la fin de l'Observable précédent.

🌐 Documentation officielle RxJS - concatMap

💡 Modes d'utilisation typiques

• Exécution de requêtes API où l'ordre est important
• Traitement des tâches basé sur une file d'attente
• Animation ou contrôle de l'interface utilisateur étape par étape
• Envoi de messages où l'ordre est important

🧠 Exemple de code pratique (avec interface utilisateur)

Exemple où chaque clic sur un bouton déclenche une requête, et les requêtes sont toujours traitées dans l'ordre.

import { fromEvent, of } from 'rxjs';
import { concatMap, delay } from 'rxjs';

// Création du bouton
const button = document.createElement('button');
button.textContent = 'Envoyer requête';
document.body.appendChild(button);

// Zone de sortie
const output = document.createElement('div');
output.style.marginTop = '10px';
document.body.appendChild(output);

// Événement de clic
fromEvent(button, 'click')
  .pipe(
    concatMap((_, index) => {
      const requestId = index + 1;
      console.log(`Requête ${requestId} démarrée`);
      return of(`Réponse ${requestId}`).pipe(delay(2000));
    })
  )
  .subscribe((response) => {
    const div = document.createElement('div');
    div.textContent = `✅ ${response}`;
    output.appendChild(div);
  });

• Chaque requête est envoyée et terminée dans l'ordre.
• La requête suivante n'est émise que lorsque la précédente est terminée.