从服务 Class 和 return Observable 进行嵌套的 HTTP 调用

Question

我需要从 Angular 5 中的服务 Class 和 Observable return 进行两个依赖 HTTP 调用，以便我的组件可以订阅它。所以在 Service Class 函数中：

HTTP 调用 1 将 return 一些数据，例如 string
HTTP 调用 2 将使用此 string 作为输入
HTTP 调用 2 returns，比方说 string[]
Return 服务类型 Class 函数将是 Observable<string[]>

无效的代码（错误：函数必须 return 一个值）：

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

从服务 Class 和 return Observable 进行嵌套的 HTTP 调用

Make nested HTTP calls from a Service Class and return Observable

rxjs

angular

angular-httpclient