javascript - 使用 RxJs 级联 ajax 调用

Question

我如何级联 RxJs 调用以从这个设计的服务中检索数据。

第一个请求转到/customer/1

/客户/:id

响应:

{
   Name: "Tom",
   Invoices: [1,3],
   Orders: [5,6]
}

在客户响应中，我们使用 2 个 InvoiceId 来访问第二项服务:

/发票/:id

响应

{
  Id: 1,
  Amount: 10
}

在客户响应中，我们使用 2 个 OrderId 来访问第三方服务:

/订单/:id

响应

{
  Id:2,
  Date: '2016-11-12'        
}

最后我想设计一个看起来像这样的对象:

{
   Name: "Tom",
   Invoices: [
    {
      Id: 1,
      Amount: 10
    },
    {
      Id: 3,
      Amount: 5
    }],
   Orders: [
   {
     Id:5,
     Date: '2016-11-12'        
   },
   {
     Id:6,
     Date: '2016-11-12'        
   }]
}

如何通过管道传递 ID，以便检索依赖对象。

我的直觉告诉我，我可能应该使用 flatMap 运算符，但我完全不确定它们如何协同工作。

var ajax = Rx.DOM.getJSON('/api/customers/1')
    .flatMap(p => p.Invoices.map(x =>
        Rx.DOM.getJSON('/api/invoices/' + x)
        ));

Answer 1

这是一个典型的用例，您需要从多个 HTTP 调用中构建响应:

const Observable = Rx.Observable;

var customerObs = Observable.create(observer => {
    Observable.of({Name: "Tom", Invoices: [1,3], Orders: [5,6]})
        .subscribe(response => {
            var result  = {
                Name: response.Name,
                Invoices: [],
                Orders: [],
            };

            let invoicesObs = Observable.from(response.Invoices)
                .flatMap(id => Observable.of({ Id: Math.round(Math.random() * 50), Amount: Math.round(Math.random() * 500) }).delay(500))
                .toArray();

            let ordersObs = Observable.from(response.Orders)
                .flatMap(id => Observable.of({ Id: Math.round(Math.random() * 50), Amount: Math.round(Math.random() * 500) }).delay(400))
                .toArray();

            Observable.forkJoin(invoicesObs, ordersObs).subscribe(responses => {
                result.Invoices = responses[0];
                result.Orders = responses[1];

                observer.next(result);
            });

        });
});

customerObs.subscribe(customer => console.log(customer));

查看现场演示:https://jsfiddle.net/martinsikora/uc1246cx/

我正在使用 Observable.of() 模拟 HTTP 请求，flatMap() 将每个发票/订单 ID 转换为一个 Observable(另一个 HTTP 请求)被重新发出，然后 toArray() 收集从运算符链发出的所有值，并将它们重新发出到一个数组中(只是因为它很方便)。

运算符 forkJoin() 等待所有源 Observable 完成，然后将它们的最后一个值作为数组发出(因此我们在 responses 中获取数组数组)。

查看类似问题:Performing advanced http requests in rxjs