Découvrons tap et map - RxJs et les Observables - Dev to be curious

Continuons notre aventure des Observables, en nous arrêtant sur les premiers operateurs que vous allez obligatoirement utiliser, à savoir : tap et map.

Découvrons les operators

Vous vous souvenez de la commande fetch de vanilla js ?

Pour récupérer le json envoyé depuis l’api, vous aviez du faire deux then :

• un premier pour récupérer le retour de l’api
• un second pour parser le retour json et récupérer le javascript

Et bien c’est un peu de ce principe que nous allons nous inspirer pour expliquer les operators.

Intérargir dans le tuyau

Lors du premier article sur les observables, nous avions parlé du principe du tuyau, qui est une bonne image pour comprendre ce qu’est l’observable.

Votre tuyau émet des gouttes d’eau de manière continuelle ou non, tout dépend de l’émetteur du tuyau.

OK, et si je vous disais que vous pouvez intérargir dans le tuyau avant même de récupérer l’eau pour l’arrosage ?
Ca serait pas mal non ?

L’arrivée du pipe

Depuis une Observable, vous allez pouvoir appliquer des operators grâce à la méthode : pipe.
Cette méthode porte bien son nom ! Nous allons pouvoir intéragir avec le tuyau de l’observable … grâce aux operators.

Les operators

Ils ne sont que des fonctions pures, qui prennent une Observable en entrée et renvoie une observable en sortie.

Nous pouvons chaîner les operators, autant que nous le souhaitons, à l’intérieur de la fonction pipe.

Nos premiers exemples avec tap et map

L’opérateur tap

Il va vous permettre d’inspecter ce qui se passe dans le tuyau, sans l’altérer.
Attention, il est devenu obsolète maintenant.
monObservable.pipe(tap(item => console.log(item)).subscribe();


L’opérateur map

Voilà notre premier operator intéressant ! Il va permettre de transformer ce qu’il y a dans le tuyau !

Imaginons que nous ayons un tuyau qui émette des entiers commençant par 0, nous allons pouvoir les faire commencer par 1, puis 2, puis .. 🙂

monOservable.pipe(map(item => item + 1)).subscribe(item => console.info(item));

Ce qui sera affiché ? Si notre observable commence à émettre à 0, on aura en fait 1.

Nous avons donc modifié ce qu’il y a dans le tuyau avant réception !