javascript - 如何按顺序调用两个 API 并将两者的数据作为单个 Observable 返回

标签 javascript angular rxjs observable

我有两个 API 要按顺序调用,第一个 API 返回的数据用于第二个。

我试过在第一次调用中使用 concatMap,然后使用第二次调用中返回的值,但是当我订阅可观察对象时,我只得到第二次调用的数据。

如何在单个可观察对象中获取来自两个调用的数据?

this.dataService.getPlayerData("heunetik").pipe(
    concatMap(data => this.dataService.getLifetimeStats(data.payload.guid))
).subscribe(finalData => {
    console.log(finalData);
});

阅读文档,这似乎是最有意义的,但是示例非常困惑...:/

最佳答案

您想做某种内部映射来组合数据:

this.dataService.getPlayerData("heunetik").pipe(
    switchMap(data => this.dataService.getLifetimeStats(data.payload.guid)
                          .pipe(map(innerData => [data, innerData])))
).subscribe(finalData => {
    console.log(finalData);
});

这将返回数组中的数据,第一个数据集为 0,第二个数据集为 1。

switchMap 只是我的偏好,这里在 switch/concat/merge 之间并不重要...它们的用途略有不同,这对多次发射很重要,但它们在这里的功能完全相同,因为它们都是单次发射可观察的。我更喜欢 switch,因为我认为它在语义上更清晰,我期待单一发射,但在这一点上可能会有不同意见。

高阶映射曾经提供允许这种组合的第二个参数,但他们用 rxjs 5 或 6 左右删除了它以支持内部映射模式以节省导入大小(IMO 这是一个错误的决定.. . map 参数经常有用,内部 map 看起来很杂乱)。

关于javascript - 如何按顺序调用两个 API 并将两者的数据作为单个 Observable 返回,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55711416/

相关文章:

javascript - 制作一个不受 body 类影响的标签

javascript - 无法读取 Angular 8 自定义 Web 组件中未定义的属性 'bind'

angular - 在 angular2 中向 FormGroup 添加多个验证器

rxjs - zip 的替代方案,每当任何可观察值发出值时都会产生值

rxjs - 累积值,例如扫描,但可以随着时间的推移重置累加器

javascript - jQuery - 逐渐显示 div

javascript - react组件中如何使用antd divider分隔屏幕的两侧?

angular - 电容器/Ionic4 : BarcodeScanner with plugin_not_installed

Angular4 Observable 订阅 ServiceStack 服务器事件

javascript - 如何自动响应 DOM 变化?