Rxjs mergeMap：Concat 2 相关 Api 请求

Question

我有两个 api 请求，第二个取决于第一个。第一个请求获得一个包含 3 个设施的数组。在此之后，我需要为每个设施执行 api 请求以获取我需要的图像。我需要设施的uuid。我认为使用 mergeMap 会很容易。但我有 2 个问题，找不到解决方案：在合并映射中，我认为服务将是数组的一项服务，但它是整个数组。我也需要订阅 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 调用 returns 一个数组。这可以通过 mergeMap-ing 扁平数组来解决，因此下游 observable 将连续发出 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 管道中使用生成的可观察对象。

Rxjs mergeMap：Concat 2 相关 Api 请求

Rxjs mergeMap: Concat 2 related Api Requests

rxjs

angular

mergemap