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

Question

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

{
  workspace: Workspace
  requests: Request[]
}

我在如何使用getCatalog(): Observable<CatalogItem[]> 函数创建它时遇到了一些困难……它应该为每个Workspace 返回一个CatalogItem，并添加任何关联的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

查看您的代码，您似乎需要为每个workspace 调用http.get<Request[]>。

以下是如何实现它，只需按照以下 3 个步骤操作即可。

1.
首先使用mergeAll 将Obsevable<Workspace[]>（由get<Workspace[]> 返回）转换为流（这样我们一次可以处理一个workspace）。

2.
接下来使用mergeMap 将每个Observable<Workspace> 转换为Observable<CatalogItem>，方法是调用http.get<Request[]> 并在使用map 的响应到达后形成一个新的CtalogItem（利用闭包引用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 收集所有源发射，并在源完成时将它们作为数组发射。

Answer 2

您可以使用内管来解决您的问题：

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

详情：

• 如果您在 switchMap 中打开另一个 pipe，您仍然拥有 switchMap 的上下文。这意味着您可以使用workspace。
• 如果您的变量名称是您想要的键（例如const key = 'test'）作为属性，您可以简写为{ key }。这将创建一个对象{ key: 'test }
• 如果你想在地图中返回一个对象，你可以写成({ ... })而不是{ return {} }

Answer 3

Here's an example:

这个想法是将您的请求链接起来，以便它们相互依赖，并且结果是您所布置的某种合并对象。

关键（至少从我的学习中）是管道结束处的toArray

  getTodos(): Observable<SomeMergedObject[]> {
    return this.http.get<TodoItem[]>('https://jsonplaceholder.typicode.com/todos').pipe(
      mergeMap( resp => resp),
      concatMap( (t: TodoItem) => {
        console.log(t.userId)
        return this.http.get<User>(`https://jsonplaceholder.typicode.com/users/${t.userId}`).pipe(
          map( user => ({ todoItem: t, user } as SomeMergedObject))
        )
      }),
      toArray()
    );
  }

接口

interface TodoItem {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

interface User {
  id: number,
  name: string,
  username: string,
  address: object,
  phone: string;
  website: string;
  company: object;
}

interface SomeMergedObject {
  todoItem: TodoItem;
  user: User;
}