Question

下午好！

我目前正在Angular2 / 4中开发一个Web应用程序，我遇到了Observables的问题。目标是在一个组件内部调用一个函数，当该函数完成时，我想要执行一些代码。因此，“myComp.component.ts”文件中的代码为：

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

问题出在“myService.service.ts”文件的“myFunc1（）”函数内。该函数的结构如下：

定义函数，返回Observable<Status>，其中Status对象只是{ status: 'ok' }。
从另一个服务中调用函数“myFunc2（）”，该服务返回一个Observable，然后做一些工作。
从另一个服务调用函数“myFunc3（）”，该服务返回一个Observable，并且必须在“myFunc2（）”完成后执行。
从另一个服务调用函数“myFunc4（）”，该服务返回一个Observable，并且必须在“myFunc3（）”完成后执行。
将{ 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（）< / em>等我认为这些解决方案不能在我的情况下使用，因为每个函数都必须在另一个之后执行。

我该怎么办？我想念的是什么？提前感谢您的帮助和时间！

Answer 1

您正在寻找的是switchMap或mergeMap。如果新的出现，它会更好地取消先前的请求。

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

从嵌套回调函数内部返回Observable

1 个答案: