Ceci est une ancienne révision du document !
Table des matières
RxJS
Référence : rxjs.dev
Types d'observables
Un observable cold est un observable qui émet quand il y a un observeur. Par opposition, un observable hot émet même s'il n'y a pas d'observeur. Avec un observable hot, quand on commence à écouter, on a les valeurs à ce moment, les valeurs passées ne sont pas accessibles.
Exemples de cold observables: Netflix Movie, vidéo Youtube (on-demand), lecture de fichier, requête HTTP, requête à une base de données. Exemple de hot observable: Film dans un cinéma, Youtube Live.
Syntaxe
Opérateurs
Les opérateurs sont des fonctions pures (sauf: tap
).
Buffering et Windowing
Use case: Obtenir des ensembles de valeurs et les émettre en lots selon les conditions données.
- Buffering: Émettre un tableau de valeurs
- Windowing: Émettre un observable de valeurs
buffer
L'opérateur buffer()
prend un observable en tant que paramètre. Lorsque cet observable émet, c'est le signal pour émettre les valeurs mis en tampon du premier observable.
Dans l'exemple suivant, des valeurs sont émises par interval(100)
à toutes les dixièmes de seconde. Les valeurs sont mis en tampon jusqu'à ce qu'une valeur du second observable interval(1000)
soit émise, soit à toutes les secondes.
À noter que si le premier observable se termine, le reste des valeurs qui n'ont pas fait partie d'un buffer sont alors émits dans un dernier buffer.
interval(100) .pipe( buffer(interval(1000)), take(3) ) .subscribe(d => console.log(d)); |
[1, 2, 3, 4, 5, 6, 7, 8] [9, 10, 11, 12, 13, 14, 15, 16, 17] [18, 19, 20, 21, 22, 23, 24, 25, 26] |
bufferCount
BufferCount émet la séquence une fois le bufferSize
atteint. Le deuxième paramètre startBufferEvery
(optionnel) dit quand repartir une nouvelle séquence.
bufferCount<number>(bufferSize: number, startBufferEvery?: number)
Code |
Résultat |
of(1,2,3,4,5,6,7,8,9) .pipe( bufferCount(4) ) .subscribe(sequence => console.log(sequence)); |
[1,2,3,4] [5,6,7,8] [9] |
of(1,2,3,4,5,6,7,8,9) .pipe( bufferCount(4, 2) ) .subscribe(sequence => console.log(sequence)); |
[1,2,3,4] [3,4,5,6] [5,6,7,8] [7,8,9] [9] |
Sources
- rxjs.dev
- Pluralsight Learning RxJS Operators by Example Playbook