Question

让我们假设我有一个带有两个可能的GET请求的REST服务器。
像这样的一个：/allItems，另一个像这样的：/{itemId}/picture。
第一个以数组的形式（仅一次）返回服务器上所有存储的项，其中每个项都有一个ID。
对于他们每个人，我想索取他们各自的照片并与他们匹配。
像这样：

this.http.get('/allItems').map(itemArray => {
   itemArray.forEach(item => {
       this.http.get('/' + item.id + '/picture')
                .subscribe(pic => item.pic = pic)
   return itemArray
 }
})

最后，我想返回一个可观察的对象，该对象将发射带有映射其各自图片的项目数组，以便其他功能可以访问完整的数据。

可能值得一提：我正在使用Angular / Typescript。

Answer 1

解决此问题的一种方法可能是这样的：-

this.http.get('/allItems').pipe(
  mergeMap((itemsArray) => of(itemsArray)),
  mergeMap(item => this.http.get('/' + item.id + '/picture')
    .pipe(
      map(picture => { const a = { 'item': item, 'image': picture }; return a; })
    ),
    toArray()),
).subscribe();  ---> this will give the array of json with item and picture field.

Answer 2

我从评论中了解到OP已经找到了解决方案。对于那些想知道的人，这就是使用forkJoin的方式，它等待Array。在返回可观察值之前，先完成forEach（）循环。

这是它的实现方式：

import { forkJoin } from 'rxjs';
import { mergeMap } from 'rxjs/operators';

this.http.get('/allItems').pipe(
  mergeMap(itemArray => {
    const observableList = [];
    itemArray.forEach(item => {
      observableList.push(this.http.get(`/${item.id}/picture`));
    });
    return forkJoin(observableList);
  )}
).subscribe(res => {
  console.log(res);
  // handle the rest here
})

Answer 3

@emkay我重构了您的代码。我认为它看起来更好。 @ mortom123想要替换关键图片的对象值。

this.http.get('/allItems')
 .pipe(
  .mergeMap((itemArray) => from(itemArray))
  .mergeMap((item) => this.http.get(`/${item.id}/picture`))
   .pipe(
    map((picture) => (
      {
        ...item,
        pic: picture
      })
 ).subscribe((data) => console.log(data));

RxJS可观察合并

3 个答案: