从服务类进行嵌套的 HTTP 调用并返回 Observable

Question

我需要从 Angular 5 中的服务类进行两个相关的 HTTP 调用并返回一个 Observable，以便我的组件可以订阅它。 所以在服务类函数内部：

• HTTP 调用 1 将返回一些数据，例如string类型
• 该string将被 HTTP 调用 2 用作输入
• HTTP 调用 2 返回，假设是一个string[]
• 服务类函数的返回类型将是Observable<string[]>

不工作的代码（错误：函数必须返回一个值）：

getData(): Observable<string[]> {
  this.httpClient.get<string>('service1/getData').subscribe(
    dataFromSvc1 => {
      return this.httpClient.get<string[]>('service2/getData/' + dataFromSvc1);
    },
    err => {
      return throwError(err);
    }
  )
}

Answer 1

试试switchMap，像这样（未测试或语法检查！）：

getData(): Observable<string[]> {
  return this.httpClient.get<string>('service1/getData')
    .pipe(
      switchMap(dataFromSvc1 => {
         return this.httpClient.get<string[]>('service2/getData/' + dataFromSvc1);
      }),
      catchError(this.someErrorHandler)
    );
}

然后订阅进入调用此方法的组件。

让我知道这个是否奏效。

Answer 2

在嵌套调用的情况下可以使用mergeMap或switchMap来获取单个 Observable 作为响应。

getData(): Observable<string[]> {
  return this.httpClient.get<string>('service1/getData').pipe(
    mergeMap( (dataFromSvc1) => {
      return this.httpClient.get<string[]>('service2/getData/' + dataFromSvc1);
    }),
    catchError( (err) => {
      // handle error scenario
    }
  )
}

查找以下文章以检查服务和组件的示例代码片段，并逐步说明执行时会发生什么。

https://www.codeforeach.com/angular/angular-example-to-handle-nested-http-calls-in-service