【问题标题】:Add data to http response using rxjs使用 rxjs 将数据添加到 http 响应
【发布时间】:2016-03-11 19:04:20
【问题描述】:

我有一个包含司机 ID 的行程实体。 我可以使用 RESTFull 端点获取行程,例如/trips/2/

//example response
{
  id: "2",
  driver_id: "123"
}

我可以使用端点获取驱动程序详细信息。例如/drivers/123/, 我最后尊重的回应是

//expected response from observable
{
  id: "2",
  driver_id: "123",
  detailed_driver: {
    name: "abc",
    id: "123"
  }
}

目前我这样做如下

this.http("/trips/2/").map(data => data.json()).subscribe(trip => {
   this.http("/drivers/" + trip.driver_id + "/").map(data => data.json()).subscribe(driver => {
      trip.detailed_driver = driver;
      this.trip = trip 
   }
}

如何使用 Rxjs 使用这两个端点从单个 observable 获得最终预期响应?

【问题讨论】:

  • 你能添加你当前的获取代码吗?

标签: angular rxjs


【解决方案1】:

您可以使用flatMap 运算符和Observable.forkJoin,如下所述:

this.http.get('/trips/someid')
   .map(res => res.json())
   .flatMap(res => {
     return Observable.forkJoin([
       Observable.of(res),
       this.http.get('/drivers/'+res['driver_id']).map(res => res.json())
     ]);
   })
   .map(res => {
     res[0]['detailed_driver'] = res[1];
     return res[0]
   })
 .subscribe(
   (data) => {
   }
 );

flatMap 允许在收到第一个请求时执行另一个请求。 Observable.forkJoin 允许在最后接收第一个响应的响应和第二个响应的结果。

这样你就可以用第二个结果更新第一个结果...

【讨论】:

  • 这里有什么问题plnkr.co/edit/opyzLR4ejKdLPGfWM7EN?p=preview 点击friend tab 并查看frineds.ts。我尝试实现您建议的代码,但没有出现错误。
  • 事实上,我的代码中有一个错字:-( }forkJoin 的末尾...我更新了我的答案并修复了你的 plunkr:plnkr.co/edit/BthgxpehFcR6fg9hBRMj?p=preview。谢谢指出这一点@micronyks!
  • 但我在对象 console.log(data) 中找不到所需的数据。你能帮帮我吗?
  • 成功了!谢谢...我需要做一些更改,例如在第二个 this.http.get() 中添加 .map()res => res.json() 和在最终映射函数中添加 return res[0]
猜你喜欢
  • 2017-04-21
  • 1970-01-01
  • 2011-03-20
  • 2021-04-09
  • 1970-01-01
  • 2017-08-24
  • 2020-05-12
  • 1970-01-01
  • 2021-02-17
相关资源
最近更新 更多