RxJS (Reactive Extensions for JavaScript) est une bibliothèque puissante pour la gestion des flux de données asynchrones en JavaScript. Au cœur de RxJS se trouvent les Observables, des flux de données qui peuvent émettre des valeurs au fil du temps. Pour créer ces Observables, RxJS fournit un ensemble de fonctions puissantes. Dans ce bref récapitulatif, nous allons explorer quatre fonctions principales : of, from, interval et timer, en détaillant leur fonction, leur utilisation et en fournissant un exemple concret pour chacune. C’est parti pour un tour d’horizon rapide des bases de RxJS !

Les Observables : la base de la programmation réactive

Avant d’explorer les fonctions, rappelons brièvement ce qu’est un Observable. Un Observable est un flux de données asynchrone, qui peut émettre zéro, une ou plusieurs valeurs au fil du temps. Il peut également émettre une erreur ou un signal de complétion. C’est une abstraction puissante pour gérer les événements, les requêtes HTTP, les données provenant du WebSocket et de nombreux autres types de flux de données.

Maintenant, explorons les fonctions de création d’Observables :

1. of : créer un Observable qui émet une série de valeurs

La fonction of crée un Observable qui émet une série de valeurs spécifiées et se complète immédiatement après. Elle est idéale pour créer un Observable à partir de données statiques, comme un tableau, un objet, ou une série de nombres.

Fonction : Créer un Observable qui émet les arguments passés en paramètres.

Utilisation :

import { of } from 'rxjs';

const observable$ = of(1, 2, 3, 4, 5);

observable$.subscribe(
  (value) => console.log('Valeur émise:', value),
  (error) => console.error('Erreur:', error),
  () => console.log('Observable complété')
);

Exemple : Créer un Observable qui émet une série de nombres et se complète immédiatement après.

Sortie :

Valeur émise: 1
Valeur émise: 2
Valeur émise: 3
Valeur émise: 4
Valeur émise: 5
Observable complété

2. from : créer un Observable à partir d’une Promise, d’un itérable ou d’un autre Observable

La fonction from crée un Observable à partir d’une variété de sources, comme une Promise, un itérable (un tableau, un set, un map, etc.) ou un autre Observable. Elle est idéale pour transformer des sources de données asynchrones en Observables.

Fonction : Convertir une source de données en Observable.

Utilisation :

import { from } from 'rxjs';

const promise = Promise.resolve('Données de la Promise');
const array = [10, 20, 30];

const promiseObservable$ = from(promise);
const arrayObservable$ = from(array);

promiseObservable$.subscribe((value) =>
  console.log('Valeur de la Promise:', value)
);
arrayObservable$.subscribe((value) =>
  console.log('Valeur du tableau:', value)
);

Exemple : Créer un Observable à partir d’une Promise et d’un tableau.

Sortie :

Valeur de la Promise: Données de la Promise
Valeur du tableau: 10
Valeur du tableau: 20
Valeur du tableau: 30

3. interval : créer un Observable qui émet des valeurs à intervalles réguliers

La fonction interval crée un Observable qui émet des nombres entiers croissants à intervalles réguliers, en millisecondes. Elle est idéale pour créer des flux de données basés sur le temps, comme des compteurs ou des mises à jour périodiques.

Fonction : Émettre une séquence de nombres à intervalles réguliers.

Utilisation :

import { interval } from 'rxjs';
import { take } from 'rxjs/operators';

const interval$ = interval(1000).pipe(take(3));

interval$.subscribe((value) =>
  console.log('Valeur de l\'intervalle:', value)
);

Exemple : Créer un Observable qui émet un nombre toutes les secondes, pendant 3 secondes.

Sortie :

Valeur de l'intervalle: 0
Valeur de l'intervalle: 1
Valeur de l'intervalle: 2

Note : Nous avons utilisé l’opérateur take(3) afin de limiter les émissions de l’observable. Sans cela, il continue d’émettre indéfiniment. Les opérateurs permettent de manipuler et transformer un observable, nous les verrons dans un prochain article.

4. timer : créer un Observable qui émet une valeur après un délai

La fonction timer crée un Observable qui émet une valeur après un délai spécifié, en millisecondes. Elle peut également émettre une séquence de valeurs à intervalles réguliers après un délai initial. Elle est idéale pour déclencher des actions différées ou des mises à jour périodiques.

Fonction : Émettre une valeur unique après un délai ou une séquence de valeurs à intervalles réguliers après un délai initial.

Utilisation :

import { timer } from 'rxjs';

const timer$ = timer(2000, 1000); // délai initial de 2 secondes, puis toutes les secondes

timer$.subscribe(value => console.log('Valeur du timer :', value));

setTimeout(()=> {
    timer$.unsubscribe();
}, 5000)

Exemple : Créer un Observable qui émet une valeur après un délai initial de 2 secondes, puis une nouvelle valeur chaque seconde. On stop l’emission au bout de 5 secondes.

Sortie :

Valeur du timer : 0 // après 2 secondes
Valeur du timer : 1 // après 3 secondes
Valeur du timer : 2 // après 4 secondes
Valeur du timer : 3 // après 5 secondes

Les fonctions of, from, interval et timer sont des outils essentiels pour créer des Observables en RxJS. Elles permettent de transformer une variété de sources de données en flux de données asynchrones, de créer des séquences de valeurs, ou de déclencher des actions différées. En maîtrisant ces fonctions, vous aurez une base solide pour explorer le monde de la programmation réactive avec RxJS.