javascript - RxJS Observable 返回数组，每次数组迭代运行另一个函数

Question

我有一个函数 getNews()，它基本上返回 angular 的 http.get 请求。请求的结果是 Id 的数组。我想遍历我得到的这个数组并运行另一个 http.get 请求(函数 getItem(id))，然后它将返回从服务器接收的单个 Id 的对象。

我试过这样使用它:

  getLatest() {
    return this.http.get('all_news_url')
    .map(res => res.json())
    // I even tried creating Observable from array and get only 5 elements
    //.map(res => Observable.from(res.json()))
    //.take(5)
    .map((data) => this.getItem(data))
    .subscribe(
      data => {
        console.log(data);
      }
    )
  }

  getItem(itemId: any): Observable<any> {
    console.log('item id', itemId);

    return this.http.get(this.generateUrl(`item/${itemId}`))
    .map(res => res.json());
  }

显然，这是行不通的。 getItem() 函数的参数始终作为整个 Id 数组传递。

感谢大家参与这个问题。

Answer 1

您可能想使用 concatMap 运算符而不是 map。 concatMap 将返回的 Observable 扁平化为源 Observable，而 map 返回一个 observable 的 observable。

如果您希望来自 getItem() 的数据与“all_news_url”中列出的顺序相同，您可以尝试类似的方法

this.http.get('all_news_url')
.concatMap(res => Observable.from(res.json()).take(5))
.concatMap((data) => this.getItem(data))
.subscribe(
  data => {
    console.log(data);
  }
);

使用上面的代码，对 getItem() 的调用将是同步的，即一次只会有一个对 'item/${itemId}' 的请求，并且是按顺序的

如果你不关心顺序，想通过一次发送多个请求来加快它们的速度，把第二个concatMap改成mergeMap。请注意，请求(对 item/itemId)仍然是有序的，但不能保证响应的顺序。您可以将最大并发请求数作为 第三个​​ 参数提供给 mergeMap(通过传递 undefined 或 null 忽略第二个参数)。

.concatMap(res => Observable.from(res.json()).take(5))
.mergeMap((data) => this.getItem(data), null, 3)

传递 1 作为 mergeMap 的第三个参数将等同于 concatMap