基于NGRX：Service中批量API调用的优化方案咨询

你的核心问题是原有代码没有正确处理多个HTTP请求的异步流，手动for循环的方式也不符合RxJS的设计思路，下面针对不同业务需求给出最优实现：

原有代码的问题 #

1. getSelectedBikes方法没有返回任何Observable，Effects调用它完全无法获取请求结果
2. 循环中直接调用http.get但未订阅或合并这些Observable，请求根本不会触发，也没法把结果传回上层

方案1：并行发起所有请求，等待全部完成后返回结果 #

适合需要一次性拿到所有自行车数据再更新状态的场景，用forkJoin实现：

修改Service.ts #

import { forkJoin } from 'rxjs';

public getSelectedBikes(bikes: Array<Bike>): Observable<Bike[]> {
  // 先过滤无bikeId的项，避免无效请求
  const requestObservables = bikes
    .filter(bike => bike.bikeId)
    .map(bike => this.http.get<Bike>(`${this.myUrl}/BikesInfo/${bike.bikeId}`));

  // forkJoin会并行发起所有请求，全部完成后返回结果数组
  return forkJoin(requestObservables);
}

对应Effects.ts调整 #

可以把获取到的所有自行车数据传入success动作，方便更新store：

public getMyBikes = createEffect(() =>
  this.actions$.pipe(
    ofType(getBikes),
    withLatestFrom(this.store.select(getBikes)),
    switchMap(([_, bikes]) =>
      this.myService.getSelectedBikes(bikes).pipe(
        map(fetchedBikes => bikesSuccess({ bikes: fetchedBikes })),
        catchError((error: Error) => of(bikesError({ error }))),
      ),
    ),
  ),
);

方案2：按顺序逐个发起请求 #

适合需要严格按顺序执行请求（比如依赖前一个请求结果）的场景，用from+concatMap实现：

修改Service.ts #

import { from } from 'rxjs';
import { concatMap, filter } from 'rxjs/operators';

public getSelectedBikes(bikes: Array<Bike>): Observable<Bike> {
  return from(bikes).pipe(
    filter(bike => bike.bikeId),
    // 逐个发起请求，前一个完成后才会触发下一个
    concatMap(bike => this.http.get<Bike>(`${this.myUrl}/BikesInfo/${bike.bikeId}`))
  );
}

这种方式会逐个返回每个请求的结果，如果你需要在Effects中逐个处理，可以调整为：

public getMyBikes = createEffect(() =>
  this.actions$.pipe(
    ofType(getBikes),
    withLatestFrom(this.store.select(getBikes)),
    switchMap(([_, bikes]) =>
      this.myService.getSelectedBikes(bikes).pipe(
        // 每个请求完成就dispatch一次动作
        map(fetchedBike => bikeLoaded({ bike: fetchedBike })),
        catchError((error: Error) => of(bikesError({ error }))),
      ),
    ),
  ),
);

方案3：并行发起请求，结果返回即处理 #

适合不需要等待全部完成，拿到结果就更新状态的场景，用from+mergeMap实现：

修改Service.ts #

import { from } from 'rxjs';
import { mergeMap, filter } from 'rxjs/operators';

public getSelectedBikes(bikes: Array<Bike>): Observable<Bike> {
  return from(bikes).pipe(
    filter(bike => bike.bikeId),
    // 并行发起请求，结果按完成顺序返回
    mergeMap(bike => this.http.get<Bike>(`${this.myUrl}/BikesInfo/${bike.bikeId}`))
  );
}

为什么不用Promise？ #

你尝试的async/await方案存在两个核心问题：

1. http.get返回的是Observable而非Promise，for await循环不会触发请求，也无法收集结果
2. 返回Promise<Observable>的结构和NgRx Effects的Observable流不兼容，完全没必要强行转Promise——RxJS本身就是为异步流设计的工具，用它处理更顺畅

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