调用内部订阅是个好方法吗?

时间:2018-09-13 15:55:26

标签: angular angular6 angular2-observables

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

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

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

如果没有,请提出最佳方法。

7 个答案:

答案 0 :(得分:12)

正确的方法是以某种方式组合各种可观测对象,然后订阅整个流程-如何组合它们取决于您的确切要求。

如果可以同时完成所有操作:

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

...等等。构成可观察对象的运算符有很多。

答案 1 :(得分:3)

您可以使用forkJoinObservables合并为单个值Observable

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

答案 2 :(得分:2)

如果可以并行解决呼叫,则可以使用forkJoin,如下所示:

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

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

答案 3 :(得分:1)

虽然上述所有方法都有助于provide solutions to this particular problem,但它们似乎都没有解决这里明显的潜在问题,具体来说:

<块引用>

在 subscribe 里面调用 subscribe 是个好方法吗?

tl;dr

不,在订阅中调用订阅是不好的。

<块引用>

为什么?

好吧,因为这不是函数式编程的工作方式。你不是从功能上思考你在程序上的思考。这本身不一定是问题,但使用 rxjs(和其他反应式编程扩展)的全部意义在于编写函数式代码。

我不会详细介绍什么是 functional programming is,但本质上,函数式编程的重点是将数据视为流。由函数操作并由订阅者使用的流。一旦您在另一个订阅中添加订阅,您就会在消费者内部(而不是在流内部)操作数据。所以你的功能流现在坏了。这可以防止其他使用者在您的代码中进一步使用该流。所以你已经把你的功能流变成了一个过程。

答案 4 :(得分: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);
//...

}

答案 5 :(得分:0)

您可以使用zip RxJs operator,然后在这种情况下,您将仅使用一个订阅。

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

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

答案 6 :(得分:0)

如前所述,forkjoin是一个很好的解决方案,但是它仅发出完成的调用。如果这些值将被重复发出,请使用I Combine合并最新。