如何使用RxJS处理内部订阅数组避免嵌套订阅的不规范写法

云上老周

2026-10-1

实现方案

核心思路

先拉取全量用户数据
提取所有用户的groupIds并去重，避免重复调用分组接口
批量拉取所有分组信息，构建ID到分组对象的映射表
遍历用户列表，将每个用户的groupIds替换为对应的完整分组对象
所有操作都在RxJS管道内完成，仅需一次订阅，完全避免嵌套订阅

完整代码实现

this.appService.getUsers().pipe(
  // 处理用户流，切换到分组拉取流，同时保留原始用户数据
  mergeMap(users => {
    // 提取所有去重的分组ID
    const allGroupIds = [...new Set(users.flatMap(user => user.groupIds))];
    // 批量拉取所有分组，返回键为分组ID、值为分组对象的Map，和原始用户列表
    return forkJoin(
      allGroupIds.map(groupId => this.appService.getGroupById(groupId))
    ).pipe(
      map(groups => {
        const groupMap = new Map(groups.map(group => [group.id, group]));
        return { users, groupMap };
      })
    );
  }),
  // 映射生成最终的带分组信息的用户列表
  map(({ users, groupMap }) => {
    return users.map(user => ({
      id: user.id,
      name: user.name,
      groups: user.groupIds.map(groupId => groupMap.get(groupId))
    })) as UserWithGroupNames[];
  })
).subscribe(usersWithGroups => {
  this.usersWithGroupNames.next(usersWithGroupNames);
});