La méthode pipe()

La méthode pipe() est une méthode des observables d'RxJs. On la retrouve dans tous les projets Angular.

Elle sert à attacher un ou plusieurs opérateurs pipeables à l'Observable.

Imaginez un Observable qui émet des objets de type T. Vous souhaitez attachez 2 opérateurs à cet Observable.

1
Observable<T>.pipe(fn1: UnaryFunction<T, A>, fn2: UnaryFunction<A, B>): Observable<B>

La première UnaryFunction (1er opérateur) reçoit l'objet de type T, le transforme en un objet de type A, puis passe le résultat à la UnaryFunction suivante qui émet à son tour un objet de type B, et ainsi de suite.

Les opérateurs pipeables

Ces opérateurs ne modifient pas l'instance de l'Observable existante lorsqu'ils sont appelés. Au lieu de cela, ils renvoient un nouvel Observable.

L'opérateur que vous ajouterez via la méthode pipe() va s'abonner à l'Observable (ou à l'opérateur précédent) et modifiera toutes les valeurs qui lui sont émises avant d'émettre le nouveau résultat au souscripteur (ou au prochain opérateur).

Exemples

Exemple avec 1 opérateur

1
2
3
4
5
6
import { of, distinctUntilChanged } from 'rxjs';

of(1, 1, 1, 2, 2, 2, 1, 1, 3, 3)
  .pipe(distinctUntilChanged())
  .subscribe(console.log);
// Logs: 1, 2, 1, 3

L'opérateur of (qui est un opérateur de création, pas un opérateur pipeable) , va émettre une à une les valeurs qui lui sont passées en paramètres.

Dans cet exemple, l'opérateur distinctUntilChanged va s'abonner aux émissions de l'Observable renvoyé par of(). Il ne transforme pas la valeur reçue mais plutôt, la réémet à l'identique, uniquement si la valeur qu'il a reçue juste avant est différente.

Si l'Observable émet 3 fois de suite la valeur 1, l'opérateur n'émettra lui qu'une seule fois la valeur 1.

L'Observer final lui, ne s'abonne pas directement à l'Observable source, mais à l'Observable renvoyé par l'opérateur distinctUntilChanged. On aura donc 4 appels à console.log() avec les valeurs 1, 2, 1 et 3.

Remarquez que même si vous n'utilisez qu'un seul opérateur, pipe() est obligatoire.

Exemple avec des opérateurs chainés

1
2
3
4
5
6
7
8
9
10
import { filter, map, reduce } from 'rxjs/operators';
import { Observable, range } from 'rxjs';

const source$: Observable<number> = range(0, 10);

  source$.pipe(
    filter(x => x % 2 === 0),
    map<number,number>(value => value * 3),
    reduce((acc, next) => acc + next, 0))
    .subscribe(console.log);

Dans cet exemple, source$ est notre Observable. Notez le $ à la fin. Il s'agit simplement d'une convention pour indiquer que la variable contient un Observable. source$ va émettre tous les nombres de 1 à 10.

La fonction pipe() va chaîner tous les opérateurs dans l'ordre. Lorsqu'un nombre est émis, il est d'abord reçu par l'opérateur filter, qui va vérifier s'il est pair. S'il est pair, l'opérateur filter va réemettre la valeur sans la modifier. Sinon, filter n'émet rien, et l'opérateur suivant ne recevra rien.

L'opérateur map va ensuite recevoir ce que filter lui émet (2, 4, 6, 8 et 10), et émettra à son tour le nombre multiplié par 3.

reduce reçoit ce que lui envoie le map (6, 12, 18, 24, 30) et calcule la somme de tout ce qui lui a été émis. Lorsque l'Observable renvoyé par le map est complété, reduce émettra alors à son tour le résultat de son calcul.

L'observer final ne recevra au final qu'une seul valeur, le résultat du reduce (6 + 12 + 18 + 24 + 30 = 90).

La console affichera donc 90.

Conclusion

En résumé, les opérateurs pipeables servent à modifier ce que l'Observable source émet avant que l'observer ne reçoive la valeur. Ils ne peuvent être utilisés qu'au sein de la méthode pipe().

Un opérateur pipepable prend un Observable en entrée et génère un autre Observable en sortie.

J'espère que cet article vous sera utile, n'hésitez pas à laisser un commentaire !