RxJS #1 : c'est quoi un Observable

Un signal répond à « quelle est la valeur maintenant ? ». Un Observable répond à une autre question : « préviens-moi à chaque fois qu'une nouvelle valeur arrive ». C'est un flux de valeurs dans le temps auquel on s'abonne. C'est la brique de RxJS, et le langage natif d'Angular pour tout ce qui est asynchrone (HTTP, événements, temps réel).

1. L'idée : un flux de valeurs dans le temps

On reprend notre fiche poste. Jusqu'ici elle affichait des notes. Maintenant on veut afficher la température live du poste : une nouvelle mesure arrive du capteur toutes les secondes. Ce n'est pas une valeur, c'est une suite de valeurs étalée dans le temps — exactement ce qu'un Observable modélise.

Un service nous expose ce flux. Le $ à la fin du nom est une convention RxJS qui signifie « ceci est un Observable » :

import { Observable } from 'rxjs';

export class PosteService {
  // flux des mesures d'un poste : émet un number toutes les secondes
  mesures$(id: string): Observable<number> {
    return new Observable(sub => {
      const t = setInterval(() => sub.next(lireCapteur(id)), 1000);
      return () => clearInterval(t); // nettoyage quand on se désabonne
    });
  }
}

Trois choses qu'un Observable peut t'envoyer : des valeurs (next, autant qu'il veut), une erreur (error, qui termine le flux), ou un signal de fin (complete). Un flux de mesures, lui, ne se termine jamais tout seul : il émet à l'infini jusqu'à ce que toi tu coupes.

2. subscribe() — rien ne se passe sans abonnement

Un Observable est paresseux et froid : tant que personne n'appelle subscribe(), le producteur (ici le setInterval) ne démarre même pas. S'abonner, c'est « ouvrir le robinet ». On branche le flux dans la fiche poste, et à chaque mesure reçue on met à jour un signal (qui, lui, alimente le template) :

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

export class FichePosteComponent implements OnInit, OnDestroy {
  mesure = signal<number | null>(null);
  private sub?: Subscription;

  constructor(private postes: PosteService) {}

  ngOnInit() {
    // MAINTENANT le flux démarre. À chaque mesure → on écrit dans le signal
    this.sub = this.postes.mesures$('A12').subscribe(m => this.mesure.set(m));
  }

  ngOnDestroy() {
    this.sub?.unsubscribe(); // on coupe le robinet, sinon fuite mémoire
  }
}

Template : <p>Température : {{ mesure() ?? '—' }} °C</p>. Remarque le pont entre les deux mondes : l'Observable gère le « ça arrive dans le temps », le signal gère le « voici la valeur courante à afficher ». subscribe prend aussi un objet à trois callbacks si tu veux gérer erreur et fin : .subscribe({ next, error, complete }).

3. Observable vs Promise

Tu connais les Promise (leçon 03). Pourquoi Angular préfère les Observables pour les données ?

Pour un appel HTTP qui renvoie une fois, les deux marchent. Mais dès qu'il faut annuler, réémettre ou transformer le flux (une recherche qui se relance à chaque frappe, par ex.), l'Observable gagne. D'où son omniprésence dans Angular.

4. Vérifie ta compréhension