Continuons notre aventure des Observables, en nous arrêtant sur les premiers operateurs que vous allez obligatoirement utiliser, à savoir : tap et map.
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 :
Et bien c’est un peu de ce principe que nous allons nous inspirer pour expliquer les operators.
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 ?
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.
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.
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();
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 !