我需要将三个数据从三个不同的 API 传递给一个函数:
this.service.service1().subscribe( res1 => {
this.service.service1().subscribe( res2 => {
this.service.service1().subscribe( res3 => {
this.funcA(res1, res2, res3);
});
});
});
在订阅中订阅是一个好习惯吗?
我需要将三个数据从三个不同的 API 传递给一个函数:
this.service.service1().subscribe( res1 => {
this.service.service1().subscribe( res2 => {
this.service.service1().subscribe( res3 => {
this.funcA(res1, res2, res3);
});
});
});
在订阅中订阅是一个好习惯吗?
正确的方法是以某种方式组合各种可观察对象,然后订阅整个流程——如何组合它们将取决于您的确切要求。
如果您可以并行执行所有操作:
forkJoin(
this.service.service1(), this.service.service2(), this.service.service3()
).subscribe((res) => {
this.funcA(res[0], res[1], res[2]);
});
如果每个都取决于前一个的结果,则可以使用mergeMap
(以前称为flatMap
)或switchMap
:
this.service.service1().pipe(
mergeMap((res1) => this.service.service2(res1)),
mergeMap((res2) => this.service.service3(res2))
).subscribe((res3) => {
// Do something with res3.
});
... 等等。有许多操作符可以组成 observables 以涵盖许多不同的场景。
您可以使用 forkJoin
将 组合Observables
成单个值Observable
forkJoin(
this.service.service1(),
this.service.service2(),
this.service.service3()
).pipe(
map(([res1, res2, res3 ]) => {
this.funcA(res1, res2, res3);
})
如果可以并行解析调用,则可以使用 forkJoin,如下所示:
joinedServiceCalls() {
return forkJoin(this.service1(), this.service2(), this.service3());
}
然后订阅该方法。 https://www.learnrxjs.io/operators/combination/forkjoin.html
尽管上述所有方法都有助于为这个特定问题提供解决方案,但它们似乎都没有解决这里明显的潜在问题,特别是:
在 subscribe 中调用 subscribe 是个好方法吗?
tl;博士
不,在订阅中调用订阅是不好的。
为什么?
好吧,因为这不是函数式编程的工作方式。你不是从功能上思考你在程序上的思考。这本身不一定是一个问题,但使用 rxjs(和其他react式编程扩展)的全部意义在于编写函数式代码。
我不会详细介绍什么是函数式编程,但本质上,函数式编程的重点是将数据视为流。由函数操作并由订阅者使用的流。一旦您在另一个内添加订阅,请订阅您在消费者内(而不是在流内)操作的数据。所以你的功能流现在坏了。这可以防止其他使用者在您的代码中进一步使用该流。所以你已经把你的功能流变成了一个过程。
看起来很奇怪,我会走这条路,因为它看起来更干净:
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);
//...
}