Abonnez-vous à plusieurs Observables (comme le chaînage de l'époque() dans les Promesses)

Mon Angulaire 2 application a 2 méthodes (GetCategories() et GetCartItems()) dans un service , et que ces deux méthodes retournent Observables.

Pour invoquer ces deux méthodes, l'une après l'autre à partir de mes composants, j'ai écrit ci-dessous le code:

 ngOnInit() 
{
   this.appService.GetCategories().subscribe( (data) => {
       this.appService.categories = data;


       this.appService.GetCartItems().subscribe( {
                                                    next: (data) => { this.appService.cart = data},
                                                    error: (err) => { this.toaster.error('cart==>' + err)}

                                                })

   });       
}

Fondamentalement, l'appel de GetCartItems() de l'intérieur subscribe() de GetCategories(), et je crois que ce n'est PAS la bonne approche. C'est une sorte de rappel de l'enfer.

Aucune idée sur comment implémenter cela dans une meilleure façon (comme le chaînage then() dans Promises)?

InformationsquelleAutor refactor | 2016-12-28
  1. 15

    Ressemble GetCartItems doens dépend pas de GetCategories. Ensuite, vous pouvez utiliser zip:

    Observable
    .zip(
        this.appService.GetCategories()
        this.appService.GetCartItems()
    )
    .catch(err => this.toaster.error(err))
    .subscribe(([categories, cartItems]) => {
        this.appService.categories = categories;
        this.appService.cart = cartItems;
    });
    • Je pense que Observable.combineLatest est le bon choix, pas Observable.zip (si j'ai bien compris le problème). Les choses ont changé dans l'année depuis que vous avez écrit cela. Lorsque j'utilise Observable.zip sans un troisième argument, comme dans le cas ci-dessus, l'une des entrées est pas défini, selon le moment de l'abonnement arrive à feu.
    InformationsquelleAutor Sergey Sokolov
  2. 7

    Ce qui est le plus généralement fait avec concat(), concatMap() ou éventuellement concatAll() en fonction de votre cas d'utilisation et whetrher vous avez besoin d'appeler à la fois des services dans l'ordre ou pas.

    function GetCategories() {
    return Observable.timer(1000).do(() => console.log('GetCategories()'));
}

function GetCartItems() {
    return Observable.timer(1000).do(() => console.log('GetCartItems()'));
}

console.log('start...');

GetCategories()
  .concatMap(() => GetCartItems())
  .subscribe(() => console.log('done'));

    Cette affiche à la console:

    start...
GetCategories()
GetCartItems()
done

    Chaque article est retardé de montrer ces sont appelés dans l'ordre l'un après l'autre.

    Si vous n'avez pas besoin de garder la même commande, vous pouvez utiliser merge() ou mergeMap().

    Voir la démo en live: https://jsbin.com/wawajob/1/edit

    Notez que l'utilisation de zip() peut avoir un comportement indésirable. Voir https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/zip.md

    InformationsquelleAutor martin