Question

我需要从Angular 5的服务类中进行两个依赖的HTTP调用，并返回一个Observable，以便我的组件可以订阅它。因此，在Service Class函数中：

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
    }
  )
}

找到下面的文章，以检查Service和Component的示例代码片段，并逐步说明执行该代码时发生的情况。

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

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

2 个答案: