從服務類進行嵌套的 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