在 subscribe 中调用 subscribe 是个好方法吗?

IT技术 javascript functional-programming rxjs observable
2021-03-14 05:31:47

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

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

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

6个回答

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

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

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 以涵盖许多不同的场景。

如果您想单独处理来自每个服务的错误怎么办?即服务 1 失败的一个错误处理程序,服务 2 的另一个错误处理程序,依此类推?无论如何,我无法想象超过 2 个订阅的实际情况,但只是想知道它将如何构建。
2021-04-16 05:31:47
假设这些是 HTTP 请求,您将如何处理每种情况下的 HTTP 错误,尤其是在 flatMap 示例中?另外,如果我正在阅读以下内容,如果我们需要确保完整性的顺序,我们需要使用concatMap而不是flatMaplearnrxjs.io/operators/transformation/concatmap.html
2021-04-18 05:31:47
它将按照编码的顺序返回结果,但我不知道它是否能保证按照指定的顺序启动它们。但是,由于它们是 HTTP 请求,即使它们以特定顺序启动,也无法保证服务器将接收和处理它们的顺序,除非您按顺序形成 - 所以如果这很重要,您需要使用类似于 flatMap 链,在开始下一个之前等待一个 @PankajParkar
2021-04-22 05:31:47
concatMap 与 flatMap 将取决于您的用例 @AsGoodAsItGets - 要么确保上面示例中的完成顺序。对于错误处理,在上面的 flatMap 示例中,如果(比如说)service2 出错,那么 service3 将不会被调用,它会转到传递给订阅的错误处理函数(如果你传递了一个)。如果你想更早地捕捉它们,你可以在管道中使用 catchError ......
2021-04-26 05:31:47
是否forkJoin保证执行的顺序?
2021-05-01 05:31:47

您可以使用 forkJoin将 组合Observables成单个值Observable

forkJoin(
  this.service.service1(),
  this.service.service2(),
  this.service.service3()
).pipe(
  map(([res1, res2, res3 ]) => {
    this.funcA(res1, res2, res3);
  })
我不认为它是等价的,因为你在这里并行调用它,而作者是按顺序调用的
2021-05-01 05:31:47

如果可以并行解析调用,则可以使用 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);
//...

}
rxjs 方法的最佳实践答案不应该是“将所有内容都转换为Promise”——它可能在某些场景(例如 HTTP 调用)中工作,但 Observables 的美妙之处在于它们处理流而不是像Promise那样的单次响应——转换他们Promise失去了使用 observables 的全部意义。
2021-04-19 05:31:47
这遇到了同样的问题,即按顺序而不是并行进行三个调用,这会不必要地慢(假设它们可以并行运行)。
2021-04-30 05:31:47