如何为RxJS Observable数组中每个旅行对象赋值图片URL属性

一、处理旅行数组（getTrips()） #

需要将获取到的Trip数组逐个处理获取图片URL，再合并成完整的带图片的Trip数组。用mergeMap配合forkJoin实现，forkJoin会等待所有图片请求完成后返回结果：

import { of, forkJoin } from 'rxjs';
import { map, mergeMap, catchError } from 'rxjs/operators';

getTrips(): Observable<Trip[]> {
  return this.http.get<Trip[]>(this.tripsUrl, this.headers).pipe(
    map((trips: Trip[]) => this.filterTripsByUsername(trips, this.auth.currentUser.username)),
    mergeMap(trips => {
      // 为每个Trip生成获取图片并赋值的Observable
      const tripObservables = trips.map(trip => {
        const placeId = trip.Destinations?.[0]?.id;
        // 无目的地ID时直接返回带默认图的Trip
        if (!placeId) {
          return of({ ...trip, imgURL: 'assets/images/trips/default.jpg' });
        }
        // 获取图片URL并赋值给Trip
        return this.getTripImgURL(placeId).pipe(
          map(imgUrl => ({ ...trip, imgURL: imgUrl })),
          // 单个图片请求失败时返回默认图
          catchError(() => of({ ...trip, imgURL: 'assets/images/trips/default.jpg' }))
        );
      });
      // 等待所有图片请求完成，返回完整数组
      return forkJoin(tripObservables);
    }),
    retry(2),
    catchError(this.handleError<Trip[]>('getTrips()', []))
  );
}

二、处理单个旅行（getTrip()） #

单个Trip的处理更简单，用switchMap切换到图片请求Observable，完成后赋值返回：

import { of } from 'rxjs';
import { map, switchMap, catchError } from 'rxjs/operators';

getTrip(id: number): Observable<Trip> {
  const url = `${this.tripsUrl}/${id}`;

  return this.http.get<Trip>(url, this.headers).pipe(
    switchMap(trip => {
      const placeId = trip.Destinations?.[0]?.id;
      if (!placeId) {
        return of({ ...trip, imgURL: 'assets/images/trips/default.jpg' });
      }
      return this.getTripImgURL(placeId).pipe(
        map(imgUrl => ({ ...trip, imgURL: imgUrl })),
        catchError(() => of({ ...trip, imgURL: 'assets/images/trips/default.jpg' }))
      );
    }),
    retry(2), 
    catchError(this.handleError<Trip>('getTrip()'))
  );
}

三、getTripImgURL()方法优化 #

你当前的Observable创建方式可以简化，用RxJS的bindCallback将Google API的回调式方法转换为Observable，代码更简洁：

import { bindCallback, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

getTripImgURL(placeId: string): Observable<string> {
  // 将Google Places的getDetails方法转换为Observable
  const getDetails$ = bindCallback(
    new google.maps.places.PlacesService(
      document.getElementById('empty')! as HTMLDivElement
    ).getDetails
  );

  return getDetails$({ placeId }).pipe(
    map(([placeResult, status]) => {
      if (status !== google.maps.places.PlacesServiceStatus.OK) {
        throw new Error(status);
      }
      return placeResult.photos?.length 
        ? placeResult.photos[0].getUrl({ maxWidth: 500 }) 
        : 'assets/images/trips/default.jpg';
    }),
    catchError(() => of('assets/images/trips/default.jpg'))
  );
}

关键注意点 #

• Immutable处理：用{ ...trip, imgURL: imgUrl }创建新的Trip对象，避免修改原响应数据，符合前端状态管理的最佳实践。
• 错误隔离：每个图片请求的错误被单独捕获，不会导致整个旅行列表或单个旅行请求失败，保证页面正常渲染。
• 并行请求：forkJoin会并行发起所有图片请求，相比串行请求效率更高；如果需要串行（避免API限流），可以把forkJoin换成concat。

内容的提问来源于stack exchange，提问作者jmo31