La bibliothèque RxJS

La programmation réactive est un paradigme de programmation asynchrone qui concerne les flux de données et la propagation du changement. RxJS (Reactive Extensions for JavaScript) est une bibliothèque de programmation réactive utilisant des observables facilitant la composition de code asynchrone ou basé sur le rappel.

RxJS fournit une implémentation du type Observable, qui est nécessaire jusqu'à ce que le type fasse partie du langage et que les navigateurs le prennent en charge. La bibliothèque fournit également des fonctions utilitaires pour créer et utiliser des observables. Ces fonctions utilitaires peuvent être utilisées pour :

• Conversion du code existant pour les opérations asynchrones en observables
• Itérer parmi les valeurs d'un flux
• Mappage de valeurs sur différents types
• Filtrage des flux
• Composer plusieurs flux

Fonctions de création observables

RxJS offre un certain nombre de fonctions qui peuvent être utilisées pour créer de nouveaux observables. Ces fonctions peuvent simplifier le processus de création d'observables à partir d'éléments tels que des événements, des minuteries, des promesses, etc...

Créer une observable à partir d'une promesse

Créer une observable à partir d'un compteur

Créer une observable à partir d'un événement

Créer un observable qui crée une requête AJAX

Les opérateurs

Les opérateurs sont des fonctions qui s'appuient sur la base d'observables pour permettre une manipulation sophistiquée des collections. RxJS définit des opérateurs tels que map(), filter(), concat() et flatMap().

Les opérateurs acceptent les options de configuration et renvoient une fonction prenant une source observable. Lors de l'exécution de cette fonction renvoyée, l'opérateur observe les valeurs émises par l'observable source, les transforme et renvoie un nouvel observable de ces valeurs transformées.

Vous pouvez utiliser des pipes pour lier des opérateurs entre eux. Les pipes vous permettent de combiner plusieurs fonctions en une seule. La fonction pipe() prend comme arguments les fonctions que vous souhaitez combiner et renvoie une nouvelle fonction qui, lorsqu'elle est exécutée, exécute les fonctions composées dans l'ordre.

Un ensemble d'opérateurs appliqués à un observable est une recette, c'est-à-dire un ensemble d'instructions permettant de générer les valeurs qui vous intéressent. En soi, la recette ne fait rien. Vous devez appeler subscribe() pour obtenir un résultat via la recette.

La fonction pipe() est également une méthode sur le Observable RxJS.
Vous utilisez donc ce formulaire plus court pour définir la même opération :

Opérateurs communs

RxJS fournit de nombreux opérateurs, mais seuls quelques-uns sont utilisés fréquemment. Pour obtenir une liste des opérateurs et des exemples d'utilisation, visitez la documentation de l'API RxJS.

Area	Operators
Creation	from, fromPromise, fromEvent, of
Combination	combineLatest, concat, merge, startWith, withLatestFrom, zip
Filtering	debounceTime, distinctUntilChanged, filter, take, takeUntil
Transformation	bufferTime, concatMap, map, mergeMap, scan, switchMap
Utility	tap
Multicasting	share

La gestion des erreurs

En plus du gestionnaire error() que vous avez fourni lors de la souscription, RxJS fournit l'opérateur catchError qui vous permet de gérer les erreurs connues dans la recette observable.

Par exemple, supposons que vous ayez un observable qui effectue une demande d'API et mappe à la réponse du serveur. Si le serveur renvoie une erreur ou que la valeur n'existe pas, une erreur est générée. Si vous interceptez cette erreur et fournissez une valeur par défaut, votre flux continue de traiter les valeurs plutôt que de générer une erreur.

Réessayer a échoué observable

Lorsque l'opérateur catchError fournit un chemin de récupération simple, "retry" vous permet de refaire une demande ayant échoué.

Utilisez l'opérateur "retry" avant l'opérateur catchError. Il s'abonne à la source observable d'origine, qui peut ensuite de réexécuter la séquence complète des actions ayant entraîné l'erreur. Si cela inclut une requête HTTP, il réessayera cette requête HTTP.

L'exemple suivant convertit l'exemple précédent pour réessayer la demande avant d'attraper l'erreur :

Conventions de dénomination des observables

Étant donné que les applications Angular sont principalement écrites en TypeScript, vous saurez généralement quand une variable est observable. Bien que le cadre Angular n'impose pas de convention de dénomination pour les observables, vous verrez souvent les observables portant le signe ( $ ) en fin de dénomination.

Cela peut être utile pour parcourir le code et rechercher des valeurs observables. En outre, si vous souhaitez qu'une propriété stocke la valeur la plus récente d'un observable, il peut être pratique d'utiliser simplement le même nom avec ou sans le ( $ ).