如何用RxJS高阶映射操作符实现家族-父-子层级批量数据提交？

现有如下数据结构：

{
 parent1: [
     {childId: 1},
     {childId: 2}
    ],
 parent2: [
     {childId: 3},
     {childId: 4}
    ],
 parent3: [
     {childId: 5},
     {childId: 6}
 ]
}

以及三个HTTP服务方法：

addFamily(data: any): Observable<Family> {
     const body = JSON.stringify(data);
     return this.httpClient
          .post<Family>(this.apiUrl + '/family', body, this.httpOptions)
}
addParent(data: any): Observable<Parent> {
     const body = JSON.stringify(data);
     return this.httpClient
          .post<Parent>(this.apiUrl + '/parent', body, this.httpOptions)
}
addChild(data: any): Observable<Child> {
     const body = JSON.stringify(data);
     return this.httpClient
          .post<Child>(this.apiUrl + '/child', body, this.httpOptions)
}

数据库对应family、parent、child三张表，需按以下流程完成批量POST请求：

• 调用addFamily()获取新的familyId；
• 为每个父级调用addParent()传入familyId，获取新的parentId；
• 为每个父级下的子级调用addChild()传入parentId。

执行后需新增1个家族、3个父级、6个子级，且子级关联父级、父级关联家族。当前代码使用多层嵌套subscribe实现该逻辑，希望改用RxJS高阶映射操作符优化。参考了一段适用于单家族-单父级-单子级场景的代码：

private getData(): Observable<VmData> {
     return this.service.getSomeData().pipe(
                 switchMap(session => this.service.getUserData(session.userId).pipe(
                      switchMap(user => this.service.getMetaData(user.id).pipe(
                           // by nesting, map has access to prior responses
                           map(userMeta => this.buildVmData(session, user, userMeta))             
                      ))
                 )),
                 tap(() => this.isLoading = false)
     );
}

请问如何修改这段代码，以支持多父级、多子级的批量提交需求？

要实现多父级、多子级的批量提交，核心是用switchMap串联异步流程，同时用forkJoin并行处理同层级的多个请求（比如多个父级、多个子级的创建），既保证流程顺序，又能提升批量操作效率。

以下是具体实现代码：

// 传入待提交的父级-子级数据对象
submitFamilyBatch(parentChildrenData: Record<string, {childId: number}[]>): Observable<{family: Family, parents: Parent[], children: Child[]}> {
  // 第一步：创建家族，获取familyId
  return this.addFamily({/* 家族初始化数据，如name等 */}).pipe(
    switchMap(family => {
      // 第二步：遍历所有父级，生成批量创建请求，并行执行
      const parentRequests = Object.keys(parentChildrenData).map(() => {
        return this.addParent({ familyId: family.id, /* 父级其他初始化数据 */ });
      });

      // 等待所有父级创建完成，拿到所有parent实例
      return forkJoin(parentRequests).pipe(
        switchMap(parents => {
          // 第三步：遍历每个父级，生成对应子级的创建请求，合并所有子级请求并行执行
          const childRequests = parents.flatMap((parent, index) => {
            const parentKey = Object.keys(parentChildrenData)[index];
            const children = parentChildrenData[parentKey];
            return children.map(child => {
              return this.addChild({ parentId: parent.id, childId: child.childId /* 子级其他初始化数据 */ });
            });
          });

          // 等待所有子级创建完成，聚合返回所有结果
          return forkJoin(childRequests).pipe(
            map(children => ({ family, parents, children }))
          );
        })
      );
    }),
    tap(() => {
      // 操作完成后的副作用处理，比如更新加载状态
      this.isLoading = false;
    })
  );
}

代码说明 #

1. 流程串联：通过switchMap依次串联家族创建、父级批量创建、子级批量创建三个阶段，确保前一阶段完成后再执行下一阶段。
2. 并行批量处理：用forkJoin处理同层级的多个请求，它会等待所有请求完成后返回结果数组，适合批量创建同类型资源的场景。
3. 层级关联：创建父级时传入家族id，创建子级时传入对应父级的id，保证数据关联关系正确。
4. 结果聚合：最后通过map把家族、父级、子级的创建结果聚合返回，方便后续业务逻辑处理。

使用示例 #

const batchData = {
  parent1: [{childId: 1}, {childId: 2}],
  parent2: [{childId: 3}, {childId: 4}],
  parent3: [{childId: 5}, {childId: 6}]
};

this.submitFamilyBatch(batchData).subscribe({
  next: result => {
    console.log('批量创建完成：', result);
  },
  error: err => {
    console.error('批量创建失败：', err);
  }
});

内容的提问来源于stack exchange，提问作者ascendev