Rxjs mergeMap: запросы API, связанные с Concat 2

Question

У меня есть два запроса api, второй зависит от первого. Первый запрос получает массив из 3 объектов. После этого мне нужно сделать запрос api для каждого объекта, чтобы получить изображение, которое мне нужно. Мне нужен доступ к объектам. Я думал, что это может быть легко с mergeMap. Но у меня две проблемы, и я не могу найти решения: внутри карты слияния я думал, что сервис будет одной службой массива, но это весь массив. Также мне нужно подписаться на getImage() и сохранить значение внутри service.image.

getNewestNursingServices() {
  return this.http.get('api/nursing-service/newest').pipe(
   mergeMap(service => this.getImage('PREVIEW', service.uuid))
  );
}
getImage(type: string, nursingService: string): Observable<Image> {
  return this.http.get<Image>('api/nursing-images/' + type + '/' + nursingService);
}

Answer 1

Ты можешь использовать forkJoin или concat:

getNewestNursingServices() {
  return this.http.get('api/nursing-service/newest').pipe(
   mergeMap((service: any[]) => {
     return concat(...service.map(s => {
       return this.getImage('PREVIEW', s.uuid)
     }) 
   }) 
  );
}

Answer 2

Надеюсь, я правильно понял вопрос.

Итак, ваша первая проблема заключалась в том, что первый вызов api возвращает массив. Это можно решить с помощьюmergeMap-сглаживающий массив, так что нижележащий наблюдаемый будет испускать 3 сервиса последовательно.

getNewestNursingServices() {
  return this.http.get('api/nursing-service/newest')
    .pipe(
      mergeMap((services: []) => {
        // `of` will return an observable which emits the items of the array after each other
        return of(services);
      }),
      mergeMap(service => this.getImage('PREVIEW', service.uuid)),
      tap((image: Image) => {
        // here you can do sideeffects with the images, eg. pushing them into an array somewhere...
      }),
      reduce(
        (allImages: Image[], currentImage: Image) => {
          // ... or you can collect them into an array, so the downstream will be `Observable<Image[]>`
          allImages.push(currentImage);
          return allImages;
        },
        [],
      ),
    );
}

Что касается того факта, что вы должны подписаться, это неправда, вы можете использовать полученную наблюдаемую, например, в async pipe, если вы не хотите использовать шаблон "побочный эффект + подписка".