web-dev-qa-db-fra.com

Est-ce un bon moyen d'appeler s'abonner à souscrire?

this.service.service1().subscribe( res1 => {
  this.service.service1().subscribe( res2 => {
    this.service.service1().subscribe( res3 => {
      this.funcA(res1, res2, res3);
  });
  });
});

Je dois transmettre trois données à une fonction à partir de trois API différentes.

Est-ce une bonne pratique de s'inscrire dans un abonnement?

Si non, s'il vous plaît suggérer le meilleur moyen.

angularangular6angular2-observables
8
Yashwanth Gurrapu

La méthode correcte consiste à composer les différentes variables observables d’une manière ou à une autre, puis à vous abonner au flux global. La manière dont vous les composerez dépendra de vos besoins.

Si vous pouvez tout faire en parallèle:

forkJoin(
   this.service.service1(), this.service.service2(), this.service.service3()
).subscribe((res) => {
   this.funcA(res[0], res[1], res[2]);
});

Si chacun dépend du résultat de la précédente:

this.service.service1().pipe(
    flatMap((res1) => this.service.service2(res1)),
    flatMap((res2) => this.service.service3(res2))
).subscribe((res3) => {
    // Do something with res3.
});

... etc. Il existe de nombreux opérateurs différents pour composer des observables.

8
Mark Hughes

Vous pouvez utiliser forkJoin pour combiner la Observables en une seule valeur Observable

forkJoin(
    this.service.service1(),
    this.service.service1(),
    this.service.service1()
  ).pipe(
    map(([res1, res2, res3 ]) => {
      this.funcA(res1, res2, res3);
    })
3
Antoine V

Si les appels peuvent être résolus en parallèle, vous pouvez utiliser forkJoin, comme ceci:

joinedServiceCalls() {
   return forkJoin(this.service1(), this.service2(), this.service3());
}

Et puis abonnez-vous à cette méthode . https://www.learnrxjs.io/operators/combination/forkjoin.html

2
Diego Pedro

Vous pouvez utiliser l'opérateur Zip RxJs , puis dans ce cas, vous n'utiliserez qu'un seul abonnement. 

Vous pouvez ensuite appeler votre fonction dans cet abonnement car tous les résultats sont disponibles.

Observable.Zip(
  this.service.service1(),
  this.service.service1(),
  this.service.service1()
).subscribe([res1, res2, res3]) {
  this.funcA(res1, res2, res3);
}
0
HDJEMAI

Ça a l'air bizarre, j'irais comme ça parce que ça a l'air plus propre:

async myFunction () {
//...
const res1 = await this.service.service1().toPromise();
const res2 = await this.service.service2().toPromise();
const res3 = await this.service.service3().toPromise();
this.funcA(res1, res2, res3);
//...

}

MODIFIER

ou le faire en parallèle

async myFunction () {

//...
let res1;
let res2;
let res3;
[res1,res2,res3] = await Promise.all([this.service.service1().toPromise(),
                                      this.service.service2().toPromise(),
                                      this.service.service3().toPromise()]);
this.funcA(res1, res2, res3);
//...

}
0
hjbello