angular - 将嵌套的 HTTP 请求合并到单个 observable 中

Question

我有一个 Workspace 模型，一个 Request 模型......现在是一个 CatalogItem 模型，它需要像这样将两者结合起来:

{
  workspace: Workspace
  requests: Request[]
}

我对如何使用 getCatalog(): Observable<CatalogItem[]> 创建这个有点困难。函数...应该返回 CatalogItem对于每个 Workspace , 与任何关联的 Request添加到它。
我意识到我的尝试很遥远，但我希望这足以帮助理解我的意图:

getCatalog(): Observable<CatalogItem[]> {
  return this.http.get<Workspace[]>(`${this.baseUrl}/workspace`).pipe(
    switchMap( (ws) => {
      return {
        workspace: ws,
        requests: this.http.get<Request[]>(`${this.baseUrl}/${ws.id}/requests`).subscribe();
      }
    })
  );
  //TODO: combine workspace and request create catalog obj
}

Answer 1

查看您的代码，您似乎需要调用 http.get<Request[]>对于每个 workspace .
以下是如何实现它，只需按照以下 3 个步骤操作。
1.
首次使用mergeAll转换 Obsevable<Workspace[]> (由 get<Workspace[]> 返回)到流中(因此我们可以一次处理一个 workspace)。
2.
下次使用mergeMap转换每个 Observable<Workspace>进入 Observable<CatalogItem>调用 http.get<Request[]>并形成一个新的CtalogItem一旦响应到达使用 map (使用闭包来引用 workspace )。
3.
最后使用 toArray 将流转换回数组.

getCatalog(): Observable<CatalogItem[]> {
  return this.http.get<Workspace[]>(`URL/workspace`).pipe(

   // 1  
    mergeAll(),

   // 2  
    mergeMap(workspace => this.http.get<Request[]>(`URL/${workspace.id}`).pipe(
      map(requests => ({ workspace, requests })))
    ),

   // 3  
    toArray()

  )
}

mergeAll可以将包含数组的 Observable 扁平化为流，更多解释请引用 @Martin's post关于在 RxJS Observable 中“展平”数组的最佳方法 toArray收集所有源排放，并在源完成时将它们作为数组发射。