web-dev-qa-db-fra.com

Abonnements imbriqués RxJs Observables?

Quelle est la façon de simplifier quelque chose comme l'exemple de code suivant? Je ne trouve pas le bon opérateur. Quelqu'un pourrait-il donner un court exemple?

this.returnsObservable1(...)
  .subscribe(

    success => {

      this.returnsObservable2(...)
        .subscribe(

          success => {

            this.returnsObservable3(...)
              .subscribe(

                success => {
                   ...
                },
rxjsobservablesubscribe
17
Max Solid

Comme mentionné dans les commentaires, vous recherchez l'opérateur flatMap.

Vous pouvez trouver plus de détails dans les réponses précédentes:

Votre exemple se lirait comme suit:

this.returnsObservable1(...)
  .flatMap(success => this.returnsObservable2(...))
  .flatMap(success => this.returnsObservable3(...))
  .subscribe(success => {(...)});
18
user3743222

Répondu précédemment pour RxJS 5, je me suis retrouvé sur cette page en utilisant 6.

Dans le cas où vous êtes également sur 6 (et je pense que vous devriez l'être maintenant), vous pouvez utiliser flatmap comme opérateur dans pipe.

Modification de l'exemple de code de @ user3743222:

this.returnsObservable1(...)
  .pipe(
    flatMap(success => this.returnsObservable2(...)),
    flatMap(success => this.returnsObservable3(...))
  )
  .subscribe(success => {(...)});
12
Mathijs Segers

L'opérateur switchMap peut également être utile. Vous trouverez ici quelques exemples décrivant l'utilité de switchMap par rapport aux abonnements imbriqués:

  1. situation avec les abonnements imbriqués

Ce codepen donne une démo: https://codepen.io/anon/pen/zdXBvP?editors=1111

Rx.Observable
  .interval(5000)
  .subscribe((val) => {
    console.log("outer:", val);
    Rx.Observable
      .interval(1000)
      .subscribe((ival) => {
        console.log("inner:", val, ival); 
      });
  });
  1. situation avec switchMap

Ce codepen donne une démo: https://codepen.io/anon/pen/xLeOZW?editors=1111

Rx.Observable
  .interval(5000)
  .switchMap((val) => {
    console.log("outer:", val);
    return Rx.Observable.interval(1000).map((ival) => [val, ival]);
  })
  .subscribe((val) => {
    console.log("inner:", val[0], val[1]);
  });
6
sdec