RXJS 在多个依赖 API 调用上答案

【问题标题】：RXJS on multiple dependent API callsRXJS 在多个依赖 API 调用上
【发布时间】：2021-05-22 10:49:41
【问题描述】：

我正在尝试使用 RXJS 将多个 API 调用组合成一个 observable，有人有什么建议吗？

getUser() //返回单个用户
getEmployeeList() //返回员工数组
getVisitsByEmployeeId(employeeId) //使用单个员工id，返回Visits数组
getVisitDetails(visistId) //遍历访问并返回访问详细信息

export class DummyComponent implements OnInit {
  displayData: any;

  constructor(private dummyService: DummyService) {}

  ngOnInit(): void {

    this.myBigAssObserveable().subscribe(
      response => this.displayData = response;
    );
  }

  myBigAssObserveable() {
    
  }


getEmployeeDetails() {
    forkJoin(
        {user:this.dummyService.getLoggerInUser(),
         employees: this.employeeService.getEmployees()})
    .subscribe(({user, employees}) => 
        return employees.find(i => i.find(i.employeeId == user.id))
}

  getVisitDetails() {
    return this.visitService
    .getVisitsById(employeeId)
    .pipe(
      flatMap((response) => 
      this.dummyService.getVisitDetails(response.visitId)));
  }
}

【问题讨论】：

这取决于 observables 是如何关联的。它们是完全不相关（即并行获取所有信息）还是相互依赖（即后续请求需要等到前一个请求完成）？
RxJS 自带了很多工具来帮助你构建异步调用。但是，没有任何魔法可以为您组合可观察的内容。在这方面，它们就像常规函数。例如：有很多方法可以“组合”字符串连接和加法，但没有通用的方式是有意义的。你想要 ("Hello", 8, 5) = "Hello13" 还是 ("Hello", 8, 5) = "Hello Thirteen" 都回答“组合”字符串连接和加法。
感谢@MichaelD 的回复。我想如果调用相互依赖会更有意义。我需要用户和员工来获取员工 ID，这是为员工获取访问所必需的，而访问详细信息是在屏幕上显示所必需的。你认为最好的选择是什么？
请分享每个api调用返回的数据（接口）的形状。
另外，请澄清您所说的“组合”是什么意思。你想要的输出形状是什么？

标签： angular typescript rxjs

【解决方案1】：

您的对象销毁似乎有问题。您能否按如下方式更新您的 getEmployeeDetails() 模块。

getEmployeeDetails() {
    forkJoin(
        {user:this.dummyService.getLoggerInUser(),
         employees: this.employeeService.getEmployees()})
    .subscribe(({user, employees}) => 
        return employees.find(i => i.find(i.employeeId == user.id))
}

我希望这会对你有所帮助。谢谢。

【讨论】：