javascript - 从嵌套回调函数中返回 Observable

Question

下午好!

我目前正在使用 Angular2/4 开发一个网络应用程序，但我遇到了 Observables 的问题。目标是在组件内部调用一个函数，当该函数完成时，我希望执行一些代码。因此，"myComp.component.ts" 文件中的代码是:

this.myService.myFunc1().subscribe(() => {
    // this code has to be executed after myFunc1() finishes.
});

问题出在“myService.service.ts” 文件的“myFunc1()” 函数中。该函数的结构如下:

1. 定义返回 Observable<Status> 的函数，其中 Status 对象只是 { status: 'ok' } .
2. 从另一个返回 Observable 的服务调用函数“myFunc2()”，并做一些工作。
3. 从另一个服务调用函数 "myFunc3()"，它返回一个 Observable 并且必须在 "myFunc2()" 完成后执行。
4. 从另一个服务调用函数“myFunc4()”，它返回一个 Observable 并且必须在 “myFunc3()” 完成后执行。
5. 返回{ status: 'ok' }进入 “myComp.component.ts” 以便执行 subscribe() 中的其他代码。

所以我需要的是 (3) 一些函数的嵌套调用，每个函数都在前一个函数之后执行。下面给出最简单的方法:

myFunc1(): Observable<Status> {
    // some code and then call of myFunc2()
    this.myService2.myFunc2().subscribe(data => {
       // do some staff here and then call of myFunc3()
       this.myService3.myFunc3().subscribe(data2 => {
          // do some other staff and then call of myFunc4()
          this.myService4.myFunc4().subscribe(data3 => {
             // do staff and then return program flow into the Component
             return Observable.of<Status>({status: 'ok'});
          });
       });
    });
}

但当然是 return Observable.of<Status>({status: 'ok'});不起作用。我一直在互联网和其他 Stackoverflow 问题上寻找解决方案，我找到了一些建议，例如使用 flatMap()、mergeMap()、switchMap() 等。我认为这些解决方案不能用于我的情况，因为每个函数都必须在另一个函数之后执行。

我能做什么？我在这里想念什么？预先感谢您的帮助和时间!

Answer 1

您正在寻找的是 switchMap 或 mergeMap。 switch map 更好，如果有新的，它会取消以前的请求。

myFunc1(): Observable<Status> {
    // some code and then call of myFunc2()
    return this.myService2.myFunc2()
      .switchMap(data => {
       // do some staff here and then call of myFunc3()
       return this.myService3.myFunc3()
      }).switchMap(data2 => {
          // do some other staff and then call of myFunc4()
          return this.myService4.myFunc4()
      }).switchMap(data3 => {
             // do staff and then return program flow into the Component
             return Observable.of<Status>({status: 'ok'});
          });
       });
    });
}