Un guide pour utiliser mergeMap et forkJoin au lieu de simples abonnements pour plusieurs demandes d'API.Dans cet article, je vais montrer deux approches pour gérer plusieurs requêtes dans Angular en utilisant mergeMap et forkJoin.
Contenu:
- Le problème
- souscrire
- mergeMap
- forkJoin
- Combiner mergeMap et forkJoin
- Comparer s'abonner avec mergeMap et forkJoin
Le problème
Dans le développement d'applications Web, nous avons souvent besoin de plus d'un appel API. Vous accédez à la page, effectuez plusieurs demandes, obtenez les données nécessaires et les résultats de certaines de ces demandes sont requis pour les appels ultérieurs.
Lorsque nous faisons de telles demandes multiples, il est important de les traiter efficacement tout en maintenant un niveau élevé de performances et de qualité de code.
Je vais vous montrer une application simple où nous devons faire 3 demandes à l'API de test (
https://jsonplaceholder.typicode.com ):
- Connectez-vous et demandez des informations sur l'utilisateur
- Sur la base des informations utilisateur, nous obtenons une liste de messages utilisateur
- Sur la base des informations utilisateur, nous obtenons une liste d'albums créés par l'utilisateur
s'abonner est la façon habituelle de traiter les demandes en angulaire, mais il existe des méthodes plus efficaces. Nous allons d'abord résoudre le problème en utilisant subscribe, puis nous améliorerons la solution en utilisant mergeMap et forkJoin.
souscrire
Moyen assez simple. Nous faisons la première demande à l'API. Ensuite, dans l'abonnement imbriqué, afin que vous puissiez utiliser la première réponse, nous faisons deux demandes supplémentaires à l'API.
mergeMap
Cet opérateur est mieux utilisé lorsque nous devons contrôler manuellement l'ordre des demandes.
Alors, quand utilisons-nous mergeMap?
Lorsque le résultat de la première demande d'API, nous devons procéder comme suit.
Regardez un exemple, nous voyons que pour la deuxième demande, nous avons besoin de userId de la réponse du premier appel.
Veuillez noter:
- flatMap - alias pour mergeMap
- mergeMap prend en charge plusieurs abonnements internes actifs en même temps, vous pouvez donc créer une fuite de mémoire avec de tels abonnements de longue durée
forkJoin
Cet opérateur convient si nous devons effectuer plusieurs requêtes et que le résultat de chacune est important. Autrement dit, vous pouvez regrouper plusieurs requêtes, les exécuter en parallèle et renvoyer une seule observable.
Alors, quand utilisons-nous forkJoin?
Lorsque les demandes peuvent être exécutées en parallèle et ne dépendent pas les unes des autres.
Combiner mergeMap et forkJoin
Habituellement, dans le développement, nous sommes confrontés à une situation où vous devez faire plusieurs demandes qui dépendent du résultat de l'exécution d'une autre demande. Voyons comment cela peut être fait en utilisant mergeMap et forkJoin.
Nous avons donc évité les abonnements imbriqués et divisé le code en plusieurs petites méthodes.
Comparaison d'un abonnement régulier avec mergeMap et forkJoin
La seule différence que j'ai remarquée est l'analyse HTML.
Voyons le temps que l'analyse a pris lors de l'utilisation d'un abonnement normal:
Voyons maintenant combien de HTML est analysé à l'aide de mergeMap et forkJoin
J'ai comparé le résultat plusieurs fois et suis arrivé à la conclusion que l'analyse avec mergeMap et forkJoin est toujours plus rapide mais la différence n'est pas très grande (~ 100 ms).
La chose la plus importante est un moyen de rendre le code plus compréhensible et lisible.
Pour résumer
Nous pouvons utiliser RxJS pour gérer plusieurs demandes en angulaire. Cela nous aide à écrire du code plus lisible et pris en charge. Eh bien, en bonus, nous constatons une légère augmentation des performances si nous utilisons les méthodes RxJS au lieu des abonnements réguliers.
J'espère que l'article vous a été utile! Suivez-moi sur
Medium et
Twitter . N'hésitez pas à commenter et à poser des questions. Je serai ravi de vous aider!
Sources
ici .