Attendre sur RxJs.Les abonnements à terminer avant de reprendre

Dans mon Angulaire 2 application, j'ai besoin de faire une série de requête http. J'ai deux services, Un & B, que chacun en fait la demande, A.get() et B.get(), qui récupère les données à partir de l'API et les stocke dans le service. Ces deux fonctions peuvent être appelées en même temps, toutefois, j'ai une troisième demande doSomething() qui dépend des résultats de A.get() et B.get(). Depuis deux A.get() et B.get() de stocker leurs réponses localement leur valeur de retour finit par être le RxJs Abonnement. Comme:

class A{
  public data;
  public get(){
    return api.call(params).subscribe((response)=>{ this.data = response.json();})
  }
}

class B{
  public data;
  public get(){
    return api.call(params).subscribe((response)=>{ this.data = response.json();})
  }
}

Mon composant ressemble à quelque chose comme ceci:

class MyComponent{
  constructor(private a: A, private b: B){
    a.get();
    b.get();
    this.doSomething(a.data, b.data);
  }
  doSomething(aData, bData){
    ...
  }
}

Mon problème est doSomething() échoue parce que a.get() et b.get() ont achevé il y a de la requête http pourtant. J'ai besoin d'un moyen de tenir à l'appel de doSomething() jusqu'à ce que mes autres appels ont terminé. J'ai rechercher partout mais n'ai pas eu de chance avec cette question. RxJs documentation donne un peu de moyens, vous pouvez fusionner Observables mais ce n'est pas ce que j'ai dans ce cas.

OriginalL'auteur tanspac | 2017-02-09

  1. 7

    Bien, ce que vous voulez peut être réalisé avec ce:

    class A {

    private data;

    public get(): Observable<any> {
        //this is a very primitive caching just to show concept
        if (this.data) {
            return Observable.of(this.data);
        }
        //In real life it would be something like this:
        // let call = this.http.get(...).map(r => r.json())
        let call = Observable.of("some value A");
        return call.do(s => this.data = s);
    }

}

class B {

    private data;

    public get(): Observable<any> {
        if (this.data) {
            return Observable.of(this.data);
        }
        let call = Observable.of("some value B");
        return call.do(s => this.data = s);
    }

}

class MyComponent {
    constructor(private a: A, private b: B) {
        Observable
            .zip(this.a.get(), this.b.get(), (a: any, b: any) => { return { a: a, b: b } })
            .subscribe((r) => {
                this.doSomething(r.a, r.b);
            });
    }
    doSomething(aData, bData) {
        console.log("aData", aData);
        console.log("bData", bData);
    }
}

    C'est une modification de votre code. Comme vous le voyez il n'y a pas besoin de s'abonner à des observables à l'intérieur de l'composants de service. Il n'y a même pas besoin de s'abonner pour leur part, en dehors de composants de service. Nous pouvons recevoir directement le résultat final dans le final s'abonner() en combinant les phénomènes observables dans une certaine manière.

    Mise à JOUR

    Quelle est la différence entre faire() et abonnez-vous().

    Simplifiant un peu (en ignorant chaud observables), observable de la pipe va pas commencer à faire des choses jusqu'à ce que vous y abonner. n'() est juste un des nombreux opérateurs conçu pour avoir quelques "effets secondaires" dans la chaîne de votre observables, par exemple, il peut produire quelques résultats intermédiaires dans le milieu de l'observable pipe à la console à des fins de débogage. C'est la principale différence. Ainsi, vous pouvez obtenir quelque chose à vous abonner() sans le faire() dans le milieu, mais vous n'obtiendrez pas quelque chose à faire() sans vous abonner().

    Merci @Alexandre qui a très bien fonctionné!. Un suivi de la question, quelle est la différence entre les deux .faire et .s'abonner. Dois-je perdre aucune fonctionnalité en l'appelant .faire sur les Observables?
    Je ne comprends pas cette partie : si (ce.de données) { return Observables.(ce.données); }
    c'est à dire, lorsqu'il est défini (qui a de la valeur) le retourner, l'autre observable va lui donner une valeur.

    OriginalL'auteur Alexander Leonov

  2. 1

    Utilisation Observable.forkJoin facilement résoudre votre problème en déplaçant votre abonnement à la composante. Il prend un tableau de froid observables, et après vous être inscrit, vous recevez un tableau de résultats. Quelque chose comme ceci:

    Observable.forkJoin([ 
    a.get(),
    b.get()
]).subscribe(
    results => {
        doSomething(results[0], results[1]);
    },
    err => {
        //handle error
    }
);

    Le rappel dans l'abonnement sera pas appelé jusqu'à ce les deux à la demande.

    Si a.get() ou b.get() échoue, le message d'erreur de la méthode sera appelée

    OriginalL'auteur andreisrob