En tant que développeur Angular, la bibliothèque RxJS est un outil qui fait partie intégrante de nos projets. Cette bibliothèque nous permet de rendre réactives nos différentes applications à travers la multitudes d'opérateurs qu'elle nous offre. Elle est beaucoup utilisée lors de l'utilisation du service HttpClient que nous offre Angular pour interagir avec des APIs.

Dans cet article, nous découvrirons les astuces pour bien utiliser quatre opérateurs que nous propose cette bibliothèque à savoir :

• switchMap

• exhaustMap

• concatMap

• mergeMap

switchMap

La particularité de cet opérateur réside dans le sens où il se désabonne de la souscription/requête qui est en cours lorsqu'il y a une nouvelle émission de flux.

Pour mieux comprendre son fonctionnement, prenons l'exemple d'une barre de recherche. Généralement, à chaque saisie d'un nouveau caractère dans la barre de recherche, nous sommes amenés à faire une requête à travers un appel d'API pour récupérer les informations. Malheureusement, si nous faisons trop d'appels, nous ferons face à une erreur 429 (Too many requests).

Pour éviter cela, nous utiliserons l'opérateur switchMap qui nous aidera à annuler la requête en cours dès qu'il y a un changement dans la barre de recherche pour garder le focus sur la prochaine requête. C'est peut-être banal mais cela nous fait beaucoup gagner en performance et en terme d'expérience utilisateur (UX).

Il est conseillé de l'utiliser sur des requêtes GET .

exhaustMap

L'opérateur exhaustMap est le contraire de switchMap. Cet opérateur ignore toutes les souscriptions/requêtes jusqu'à ce que celle en cours soit terminée. Il traite donc une requête à la fois et surtout annule toutes les autres pendant le traitement de la requête en cours.

Supposons que nous ayons une interface web interagissant avec une API qui permet à l'utilisateur de se connecter sur la plateforme en cliquant sur un bouton. L'utilisateur clique sur le bouton à plusieurs reprises ce qui entraînera plusieurs requêtes à la fois. De notre côté, nous voulons éviter des requêtes supplémentaires pour une même action et par la même occasion éviter une saturation inutile de notre serveur. L'opérateur exhaustMap est une bonne astuce pour résoudre le problème. Il est par exemple fortement recommandé dans ce cas d'utilisation.

concatMap

L'opérateur concatMap permet d'exécuter nos souscriptions/requêtes dans l'ordre lorsque nous avons plusieurs émissions de flux. Comme nous l'avons remarqué, l'accent est mis sur l'ordre d'exécution des requêtes. Les requêtes s'exécuteront les unes après les autres.

C'est un opérateur qui n'est pas très performant du fait que nous aurons une pile de requêtes à exécuter en série.

Il peut être utilisé sur des requêtes GET, POST et PUT tout en étant conscient que l'ordre d'exécution compte énormément pour notre logique métier.

mergeMap

L'opérateur mergeMap est le contraire de concatMap. Cet opérateur exécute nos souscriptions/requêtes en parallèles. Nous sommes donc d'accord que l'ordre ici ne compte pas du tout.

Il peut être utilisé sur tout type de requête à savoir GET, POST, PUT, PATCH, DELETE.

En somme, le but est de partager quelques astuces pour permettre une prise de décision rapide lorsque nous faisons face à des problématiques et que nous hésitons à utiliser l'un des quatre (04) opérateurs RxJS dont il est question. Ils sont parfois ambigus et incompris pour beaucoup d'entre nous. Toutefois, ils sont beaucoup utilisés et nous comprenons mieux à présent pourquoi et quand il faut les utiliser.

Pour plus d'informations

👉 switchMap

👉 exhaustMap

👉 concatMap

👉 mergeMap