Angular 9服务嵌套的http请求

Question

我需要对 2 个单独的端点进行查询，以提供我的组件所需的对象。

No	Endpoint	Response
1	/registry/colors	{"colors":["red","green","blue","orange"]}
2	/color/{colorName}	{"name":"red", "details":["detail1","detail2", "detail3"]}

对于颜色数组中的每种颜色，我需要调用颜色细节端点并将所有这些颜色细节收集到一个颜色数组中。

getColors(): Observable<Color[]> {
  return this.http.get<ColorRegistry>(this.registryUrl).pipe(
    map((registry:ColorRegistry) => registry.colors.concatMap((colorName: string) => {
      return this.http.get<Color>(this.colorUrl+"/"+colorName);
    }))
  )
}

我希望上述方法返回以下内容：

[
 {"name":"red", "details":["detail1","detail2", "detail3"]},
 {"name":"green", "details":["detail1","detail2", "detail3"]},
 {"name":"blue", "details":["detail1","detail2", "detail3"]},
 {"name":"orange", "details":["detail1","detail2", "detail3"]}
]

显然我的做法是错误的，我正在寻找正确的方法来使用可观察对象执行嵌套请求。

Answer 1

你的方向是对的。

尝试以下更改。

1. 将map 运算符替换为更高阶的映射运算符，例如switchMap。
2. 使用 JS Array#map 并将 colors 数组属性中的每个条目替换为第二次调用的响应。
3. 使用forkJoin并行触发请求，最后合并结果。

getColors(): Observable<Color[]> {
  return this.http.get<ColorRegistry>(this.registryUrl).pipe(
    switchMap((registry: ColorRegistry) => {
      return forkJoin(
        registry.colors.map((colorName: string) => 
          this.http.get<Color>(`${this.colorUrl}/${colorName}`)
        )
      ) as Observable<Color[]>;    // <— assert type here
    })
  );
}

Answer 2

registryUrl = '/registry/colors';

colorUrl(color) {
  return `/color/${color}`;
}

return this.http.get<ColorRegistry>(this.registryUrl).pipe(
  map(registry => from(registry.colors))
  forkJoin(color => this.http.get<Color>(this.colorUrl(color)))
);