Angular 14中RxJS forkJoin结果在多步串行API调用中的使用问题

嘿，我完全懂你的困扰！你现在的问题核心是第二个concatMap里拿不到resA，因为每个concatMap的回调只能拿到上一个Observable输出的值——而第一个concatMap只返回了apiCallC的结果，把resA给丢了对吧？

给你两种实用的解决方案，按需选就行：

方案一：传递上下文对象（适合需要保留多步结果的场景） #

我们可以在第一个concatMap里，把resA和apiCallC的结果一起包装成对象传递下去，这样后续操作就能拿到需要的值了：

getBooks(bookInfoToSend, otherInfoToSend) {
  forkJoin([
    this.apiCallA(bookInfoToSend),
    this.apiCallB(otherInfoToSend)
  ]).pipe(
    // 调用apiCallC后，把需要的resA和C的结果一起打包
    concatMap(([resA, resB]) => 
      this.apiCallC(resA, resB).pipe(
        map(cResult => ({ resA, cResult })) // 这里可以按需添加resB
      )
    ),
    // 现在能直接拿到resA了，调用apiCallD
    concatMap(({ resA }) => this.apiCallD(resA))
  ).subscribe({
    next: (dResult) => {
      // 处理apiCallD的最终结果
      console.log('apiCallD返回结果:', dResult);
    },
    error: (err) => {
      // 别忘了处理错误，避免整个流挂掉
      console.error('API调用出错:', err);
    }
  });
}

方案二：嵌套串行调用（适合不需要保留apiCallC结果的场景） #

如果apiCallD只需要resA，而且你不关心apiCallC的结果，那可以直接在第一个concatMap里用concat操作符把两个串行API串起来，这样能直接访问resA：

getBooks(bookInfoToSend, otherInfoToSend) {
  forkJoin([
    this.apiCallA(bookInfoToSend),
    this.apiCallB(otherInfoToSend)
  ]).pipe(
    concatMap(([resA, resB]) => 
      // 先执行apiCallC，完成后再执行apiCallD
      concat(
        this.apiCallC(resA, resB),
        this.apiCallD(resA)
      )
    )
  ).subscribe({
    next: (result) => {
      // 这里会触发两次：第一次是apiCallC的结果，第二次是apiCallD的结果
      console.log('当前API返回结果:', result);
    },
    error: (err) => console.error('API调用出错:', err)
  });
}

小提醒：如果某个API调用可能失败，记得在对应的Observable里加catchError做局部错误处理，不然整个流会直接终止哦！

备注：内容来源于stack exchange，提问作者Pepper