Question

简化以下代码示例的方法是什么？我找不到合适的操作员..任何人都可以举一个简短的例子吗？

this.returnsObservable1(...)
  .subscribe(

    success => {

      this.returnsObservable2(...)
        .subscribe(

          success => {

            this.returnsObservable3(...)
              .subscribe(

                success => {
                   ...
                },

Answer 1

正如评论中所述，您正在寻找flatMap运营商。

您可以在以前的答案中找到更多详细信息：

您的示例将显示为：

this.returnsObservable1(...)
  .flatMap(success => this.returnsObservable2(...))
  .flatMap(success => this.returnsObservable3(...))
  .subscribe(success => {(...)});

Answer 2

以前对RxJS 5的回答是，我在使用6时出现在此页面上。

如果您的年龄也达到6（我认为现在应该是），则可以在flatmap中将pipe用作operator。

修改了@ user3743222的示例代码：

this.returnsObservable1(...)
  .pipe(
    flatMap(success => this.returnsObservable2(...)),
    flatMap(success => this.returnsObservable3(...))
  )
  .subscribe(success => {(...)});

Answer 3

switchMap运算符也很有用。可以在此处找到描述switchMap与嵌套订阅相比的有用性的一些示例：

嵌套订阅的情况

此codepen提供了一个演示： https://codepen.io/anon/pen/zdXBvP?editors=1111

Rx.Observable
  .interval(5000)
  .subscribe((val) => {
    console.log("outer:", val);
    Rx.Observable
      .interval(1000)
      .subscribe((ival) => {
        console.log("inner:", val, ival); 
      });
  });

使用switchMap的情况

此codepen提供了一个演示： https://codepen.io/anon/pen/xLeOZW?editors=1111

Rx.Observable
  .interval(5000)
  .switchMap((val) => {
    console.log("outer:", val);
    return Rx.Observable.interval(1000).map((ival) => [val, ival]);
  })
  .subscribe((val) => {
    console.log("inner:", val[0], val[1]);
  });

Answer 4

您基本上需要测序。使用 RxJS concat，你可以这样做：

import { concat } from 'rxjs';
...

concat(
  this.returnsObservable1(...), 
  this.returnsObservable2(...), 
  this.returnsObservable3(...), 
  ...
)
.subscribe(success => {(...)});

如果您后续的 observable 需要知道之前的值，您可以使用 RxJS concatMap 运算符。

import { concatMap } from 'rxjs/operators';
...

this.returnsObservable1(...)
  .pipe(
    concatMap(result1 => this.returnsObservable2(...)),
    concatMap(result2 => this.returnsObservable3(...)),
    ...
  )
  .subscribe(success => {(...)});

连接：https://www.learnrxjs.io/learn-rxjs/operators/combination/concat

concatMap：https://www.learnrxjs.io/learn-rxjs/operators/transformation/concatmap

RxJs Observables嵌套订阅？

4 个答案: