Angular中使用RxJS串联多级API调用合并响应数据问题

问题根因 #

代码无法返回合并结果的核心原因：concatMap中直接返回了fetchUserById的接口响应流，导致原故事条目（itm）的by/title/time等字段被丢弃，流向下游的只有第三级用户接口的返回值。

修正后完整代码 #

this.service.fetchStories()
  .pipe(
    // 拿到故事ID数组后，并行处理所有单条故事请求
    switchMap(idArray => forkJoin(
      idArray.map(id => 
        this.service.fetchStoryItems(id).pipe(
          // 拿到单条故事数据后，请求对应作者信息
          concatMap(storyItem => 
            this.service.fetchUserById(storyItem.by).pipe(
              // 合并故事字段和作者的karma字段
              map(userInfo => ({
                ...storyItem,
                karma: userInfo.karma
              }))
            )
          )
        )
      )
    )),
    take(1)
  )
  .subscribe(data => console.log(data));

关键逻辑说明 #

• 合并数据的核心操作是在拿到用户接口返回后，通过map操作符将原故事对象的所有属性展开，再追加从用户接口取到的karma字段，生成符合预期结构的新对象向下传递
• 此处用forkJoin是合理的：它会等待所有单条故事+对应作者的请求全部完成后，按ID原顺序返回组装好的结果数组
• 如果是用Angular HttpClient发请求，take(1)可以省略，HttpClient的请求流本身会在响应返回后自动完成，只会触发一次值发射

运行后拿到的data就是目标结构：每个条目同时包含故事本身的by/title/time字段，以及对应作者的karma字段。

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