在订阅中调用subscribe是一种好方法吗?

问题描述 投票:12回答:6
this.service.service1().subscribe( res1 => {
  this.service.service1().subscribe( res2 => {
    this.service.service1().subscribe( res3 => {
      this.funcA(res1, res2, res3);
  });
  });
});

我需要将三个数据从三个不同的API传递给一个函数。

在订阅中订阅是一种好习惯吗?

如果没有,请建议最佳方式。

angular angular6 angular2-observables
6个回答
16
投票

正确的方法是以某种方式组合各种可观察量,然后订阅整体流程 - 你如何构成它们将取决于你的确切要求。

如果你可以并行执行所有操作:

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

如果每个都取决于前一个的结果:

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

... 等等。有许多不同的运算符来组成可观察量。


3
投票

您可以使用forkJoinObservables组合成单个值Observable

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

2
投票

如果可以并行解析调用,可以使用forkJoin,如下所示:

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

然后订阅该方法。 https://www.learnrxjs.io/operators/combination/forkjoin.html


0
投票

看起来很奇怪,我会这样,因为它看起来更干净:

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);
//...

}

编辑

或者并行完成

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
投票

你可以使用zip RxJs operator,然后在这种情况下你只会使用一个订阅。

然后,您可以在该订阅内调用您的函数,因为所有结果都可用。

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

0
投票

如前所述,forkjoin是一个很好的解决方案,但它只发出完成的调用。如果这些是将要重复发射的值,请使用我将combineNeatest。

© www.soinside.com 2019 - 2024. All rights reserved.