Commençons notre série sur les Observables avec une présentation de la classe, à quoi elle sert. Nous les comparerons avec les Promises, et nous verrons pourquoi elles sont bien plus puissantes !
Les Observables de RxJs se basent sur le pattern Observer :
Il s’agit d’une programmation réactive (l’opposé de la programmation passive, où l’on demande les informations, ici, on va y souscrire).
Une approche pratique de voir les observables est de les comparer à une persone qui cherche à arroser son jardin.
Souvent lorsque l’on veut éviter le Hell Callback, et que l’on souhaite avoir une programmation asynchrone plus lisible, le réflexe que nous allons acquérir, du côté développement web, c’est d’utiliser les Promises.
Pour rappel, les promises sont :
Une fois le résultat récupéré, vous allez pouvoir décider de le traiter et / ou de le ré-enchainer avec une autre promesse par exemple.
L’Observable est par essence paresseuse ! Point intéressant pour de la programmation réactive, n’est-ce pas ?
En somme, tant qu’il n’y a aucun observeur sur l’Observable, elle ne se déclenche, n’exécute aucune émission !
De plus, à la différence de la Promise, l’Observable est de base synchrone, elle ne s’éxecute pas obligatoirement dans le Pool Event.
C’est notre code dans l’Observable qui va le décider !
Je vous invite à lire cet article sur la différence entre Promise / Stream / Observable.
Ce qui fait la force (et aussi sa faiblesse) de l’Observable, c’est qu’on va pouvoir aller beaucoup plus loin dans le traitement des données dans le tuyau (Stream).
Pour reprendre l’image du tuyau d’arrosage.
Et si la taille des gouttes d’eau ne vous convenait pas ? La couleur de chaque goutte d’eau n’était pas la bonne ? Et tiens, et si vous souhaitiez ne prendre qu’une goutte d’eau sur deux ?
En Observable, c’est faisable ! L’utilisation d’operators, une fois appliqués dans le tuyau (pipe), vous permettre de transformer ce qui est émis depuis l’Observable !
Et voilà toute la puissance des Observables : vous allez pouvoir :
On vous en dit plus dans le prochain article, avec la découverte du pipe, et du tap !
import { Observable } from 'rxjs';
const observable = new Observable(subscriber => {
subscriber.next(1);
subscriber.next(2);
subscriber.next(3);
setTimeout(() => {
subscriber.next(4);
subscriber.complete();
}, 1000);
});
console.log(‘just before subscribe’);
observable.subscribe({
next(x) { console.log(‘got value ‘ + x); },
error(err) { console.error(‘something wrong occurred: ‘ + err); },
complete() { console.log(‘done’); }
});
console.log(‘just after subscribe’);