Search for a command to run...
Thanks.
Depuis l'arrivée des Signals dans Angular, une question revient sans cesse dans les équipes : comment continuer à profiter de la puissance de RxJS, de ses opérateurs, de sa gestion fine des flux async
Si vous suivez l'actualité d'Angular avec la sortie de la version 20 du framework, vous avez probablement entendu de plus en plus ce terme. Mais au-delà du jargon, qu'est-ce que le Zoneless concrètement pour vos applications Angular ? Pourquoi est-il...
Si vous avez l’habitude de manipuler des formulaires réactifs (Reactive Forms) dans un projet Angular, vous connaissez certainement la méthode patchValue(…). Cette méthode, permet de mettre à jour les valeurs de votre formulaire. Cependant, son utili...
Depuis la sortie de la version 17 du framework Angular, on parle de la renaissance de Angular. Il y a eu beaucoup de changements majeurs depuis la version 16 du framework pour préparer le terrain à cette renaissance. Ces changements majeurs ont rendu...
Dans notre précédent article, nous avons vu ensemble ce qu'est un Signal Input et comment l'utiliser. Nous avons particulièrement remarqué sa similarité avec le décorateur @Input(). Dans ce nouvel article, nous verrons ensemble un nouveau type de inp...
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
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 .
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.
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.
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
👉 mergeMap
