顺序调用嵌套订阅

Question

调用一个依赖于另一个订阅方法的订阅

结构：

    this.example1().subscribe(res => {
      this.response = res;
    })


  example1(): Observable<any> | any {
    this.example2().pipe(
      catchError(err => {
        return throwError(err);
      })
    ).subscribe(res => {
       return of(res);
    });
  }

  example2(): Observable<any> | any {
     this.example3().pipe(
      catchError(err => {
        return throwError(err);
      })
    ).subscribe(res => {
      return of(res);
    });

  }

  example3() {
    return of('return from example 3');
  }

现在出现错误“无法读取未定义的属性‘管道’”

example3() 正确返回值，但从 example2 值没有返回到示例 1

链接：stackblitz demo

Answer 1

example1() 和 example2() 函数不返回任何内容。只需添加 return 关键字即可返回您的 Observables。

Answer 2

您无需订阅 example1()、example2()、example3()。
异步回调方法中的返回 subscribe 不是函数的返回。

  example1(): Observable<any> | any {
    console.log('1');
    return this.example2().pipe(
      catchError(err => {
        return throwError(err);
      })
    );
  }

  example2(): Observable<any> | any {
    console.log('2');
    return this.example3().pipe(
      catchError(err => {
        return throwError(err);
      })
    );
  }

  example3() {
    console.log('3');
    return of('return from example 3');
  }

StackBlitz

更新（2019 年 3 月 15 日） 根据您的评论，代码应为：

export class AppComponent {
  response;
  private init$: Observable<any>;

  public ngOnInit() {
    //get Data from remote
    this.example3().subscribe(value => {
      //Do primary somethimg with result
      let calcVal = value *2;
      // Do remote something with data
      this.example2(calcVal).subscribe(newValue => {
        // Result with updated data
        console.log(newValue);
        this.response = newValue;
      });
    });
  }

  // Async do something with data
  example2(value: number): Observable<string>{
    return of('Value is: ' + value);
  }

  // Async get data
  example3(): Observable<number> {
    console.log('3');
    return of(3);
  }

}

StackBlitz

或者用switchMap：

export class AppComponent {
  response;
  private init$: Observable<any>;

  public ngOnInit() {
    let obs = this.example3().pipe(switchMap(val => this.example2(val)));
    obs.subscribe(result => this.response = result);
  }

  // Async do something with data
  example2(value: number): Observable<string>{
    return of('Value is: ' + value);
  }

  // Async get data
  example3(): Observable<number> {
    console.log('3');
    return of(3);

}

StackBlitz