使用 RxJs 执行顺序 api 调用？答案

【问题标题】：Perform sequential api calls with RxJs?使用 RxJs 执行顺序 api 调用？
【发布时间】：2017-10-18 21:04:27
【问题描述】：

在 RxJs 中是否有一种方法可以执行两个 api 调用，其中第二个调用需要来自第一个的数据并将组合结果作为流返回？我想要做的是调用 facebook API 来获取组列表和各种大小的封面图像。 Facebook 返回如下内容：

// call to facebook /1234 to get the group 1234, cover object has an
// image in it, but only one size
{ id: '1234', cover: { id: '9999' } }

// call to facebook /9999 to get the image 9999 with an array
// with multiple sizes, omitted for simplicity
{ images: [ <image1>, <image2>, ... ] }

// desired result:
{ id: '1234', images: [ <image1>, <image2>, ... ] }

所以我有这个：

var result = undefined;
rxGroup = fbService.observe('/1234');
rxGroup.subscribe(group => {
  rxImage = fbService.observe(`/${group.cover.id}`);
  rxImage.subscribe(images => {
    group.images = y;
    result = group;
  }
}

我想创建一个接受组 id 并返回一个 Observable 的方法，该方法将在流中包含组合的组 + 图像（此处为结果）。我知道我可以创建自己的 observable 并在其中调用 next() 函数，在那里我在上面设置了“结果”，但我认为必须有一种 rx 方式来做到这一点。 select/map 让我转换，但我不知道如何插入另一个电话的结果。 when/and/then 看起来很有希望，但看起来也不支持类似的东西。我可以map 并返回一个 observable，但调用者必须进行两次订阅。

【问题讨论】：

标签： rxjs

【解决方案1】：

看起来 flatMap 是要走的路 (fiddle)。它被称为subscribe，并为您提供来自流的值。您从中返回一个可观察对象，并将所有创建的可观察对象的值（一个用于基本流中的每个元素）输出到结果流中。

var sourceGroup = { // result of calling api /1234
  id: '1234',
  cover: {
    id: '9999'
  }
};
var sourceCover = { // result of calling api /9999
  id: '9999',
  images: [{
    src: 'image1x80.png'
  }, {
    src: 'image1x320.png'
  }]
};

var rxGroup = Rx.Observable.just(sourceGroup);
var rxCombined = rxGroup.flatMap(group =>
  Rx.Observable.just(sourceCover)
  .map(images => ({
    id: group.id,
    images: images.images
  }))
)

rxCombined.subscribe(x =>
  console.log(JSON.stringify(x, null, 2)));

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.min.js"&gt;&lt;/script&gt;

结果：

{
  "id": "1234",
  "images": [
    {
      "src": "image1x80.png"
    },
    {
      "src": "image1x320.png"
    }
  ]
}

【讨论】：

【解决方案2】：

您应该使用concatMap 而不是 flatMap，它将保留源排放的顺序。

【讨论】：