Question

我在后端进行了设置，我从一个端点获取用户信息，并从另一个端点获取他们的个人资料照片。

我需要先获取用户，然后获取他们的照片，然后再在屏幕上显示任何内容。

我有一个以下界面

interface User {
  id: string;
  name: string;
  email: string;
  photoUrl?: string;
}

和两个返回可观察值的函数：getUsers和getUserPhoto。

我这样拨打电话：

this.getUsers().pipe(
  map((users: User[]) => {
    return users.forEach(user => {
      // this part is problematic as I don't know how to call it properly
      return this.getUserPhoto(user.id)
    })
  })
);

理想情况下，此调用的最终结果应该是一个User数组，其所有属性都包括photoUrl。

Answer 1

尝试一下


this.getUsers.pipe(
    switchMap(users => {
        return forkJoin(users.map(user => this.getPhoto(user.userPhotoUrl).pipe(map(photo => ({...user, photo})))))
})
)

您将拥有一系列具有photo属性的用户

Answer 2

您可以使用rxjs中的concat运算符来链接您的api调用，请点击此链接以获取更多详细信息： https://www.learnrxjs.io/operators/combination/concat.html

如何通过可观察对象合并来自两个端点的数据？

2 个答案: