从嵌套回调函数内部返回Observable [英] Return Observable from inside nested callbacks functions

问题描述

下午好！

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

I'm currently developing a web app in Angular2/4 and I have a problem with Observables. The goal is, inside a component, to call a function and when that function finishes, I want some code to be executed. So, the code in the "myComp.component.ts" file is:

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

问题出在"myService.service.ts" 文件的"myFunc1()" 函数内部.该函数的结构如下:

The problem is inside the "myFunc1()" function of the "myService.service.ts" file. The structure of this function is the following:

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

1. Define the function, which returns an Observable<Status>, where Status object is just { status: 'ok' }.
2. Call the function "myFunc2()" from another service, which returns an Observable, and do some staff.
3. Call the function "myFunc3()" from another service, which returns an Observable and has to be executed after "myFunc2()" finishes.
4. Call the function "myFunc4()" from another service, which returns an Observable and has to be executed after "myFunc3()" finishes.
5. Return the { status: 'ok' } into the "myComp.component.ts" in order the other code inside the subscribe() to be executed.

所以我需要的是(3)某些函数的嵌套调用，每个函数中的每一个都要在上一个函数之后执行.最简单的方法如下:

So what I need is (3) nested calls of some functions, each and every one of them to be executed after the previous one. The most simple method is given below:

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'});当然不起作用.我一直在寻找Internet上的解决方案以及其他Stackoverflow问题，并且发现了一些建议，例如使用 flatMap()， mergeMap()， switchMap()等.我认为在我的情况下无法使用这些解决方案，因为每个函数都必须在另一个函数之后执行.

But of course the return Observable.of<Status>({status: 'ok'}); doesn't work. I have been searching for a solution on the Internet and other Stackoverflow questions and I found suggestions like use of flatMap(), mergeMap(), switchMap() etc. I think that these solutions cannot be used in my case, because each function has to be executed after the other.

我该怎么办?我在这里想念什么?预先感谢您的帮助和您的时间！

What can I do? What I miss here? Thank you in advance for your help and your time!

推荐答案

您正在寻找的是switchMap或mergeMap.切换图更好，如果有新的出现，它将取消先前的请求.

What You are looking for is switchMap or mergeMap. switch map is better it will cancel previous request if new comes out.

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！