Angular Http 客户端发送到许多请求

Question

大家好，我正在尝试通过来自“@angular/common/http”的 HttpClient 发出一个简单的 POST 请求；

所以我给自己找了一个看起来像这样的方法

getRecommendations(answers: any, vehicles:  Array<string>) {
// map answers to API interface
const apiAnswers = answers.map( answer => {
  return {
    questionId: answer.questionId,
    answer: parseInt(answer.answerKey, 10)
  };
});
const result = {};
result['vehicles'] = vehicles;
result['answers'] = apiAnswers;

return this.http.post(environment.api + '/recommend/', result
).pipe(
  map( (res: any) => {
    return res.Packages;
  }),
  catchError( (err) => {
    this.errorService.showError('Get Recommendation Error');
    return of(`Get Recommendation Error: ${err}`);
  }),
  finalize( () => {
    // hide loader no matter what happens
    this.appLoaderService.setLoading(false);
  })
);
}

我希望这个函数发出一个 post 请求并返回答案，但 ist 确实发出了 6 个请求....

我 100% 确定此方法只被调用一次，因此我假设问题所在，位于 this.http.post 方法中的某处，但我无法弄清楚问题出在哪里，有人可以帮助我吗？

编辑:这是订阅方法的方式

    export class RecommendationsComponent implements AfterViewInit {

  @ViewChildren('packageComponent', { read: ElementRef }) packageElements: QueryList<ElementRef>;

  public translations$: Observable<IResultTranslations>;
  public packages$: Observable<IPackage[]>;
  public recommendedPackages$: Observable<IPackage[]>;
  public optionalPackages$: Observable<IPackage[]>;
  public nonPreferredPackages$: Observable<IPackage[]>;
  public vehicles$: Observable<IVehicle[]>;
  public selectedVehicles: IVehicle[];
  public height: number;

  public selectedPackages: IPackage[] = [];

  constructor(private translate: TranslateService,
    private apiService: ApiService,
    private recommendationService: RecommendationService,
    private router: Router,
    private uiService: UiService,
    private cd: ChangeDetectorRef,
    private translateService: TranslateService,
    private hostService: HostService
  ) {
    const answers = this.recommendationService.getAnswers();
    const vehicles = this.recommendationService.getVehicles();

    // navigate to start if no answers available
    if (!answers || answers.length === 0) {
      this.router.navigate(['']);
      return;
    }

    this.packages$ = this.apiService.getRecommendations(answers, vehicles);
    this.translations$ = this.apiService.getTranslations(answers, vehicles);



    // select recommended packages
    this.packages$ = this.packages$.pipe(
      map( packages => packages.map( p => {
        if (p.recommended) {
          this.toggleSelectedPackage(p, true);
          p.selected = true;
        }
        return p;
      }))
    );

    // filter all recommended packages
    this.recommendedPackages$ = this.packages$.pipe(
      map( packages => packages.filter( p => p.recommended && !p.nonPreferred))
    );

    // filter all optional packages
    this.optionalPackages$ = this.packages$.pipe(
      map( packages => packages.filter( p => !p.recommended && !p.nonPreferred))
    );

    // filter all non preferred packages
    this.nonPreferredPackages$ = this.packages$.pipe(
      map( packages => packages.filter( p => p.nonPreferred))
    );

    // init selectedVehicles
    this.selectedVehicles = [];
    // get vehicles from localized content
    this.vehicles$ = this.translateService.get('vehicles').pipe(
      // filter vehicles with ids from vehicle component
      map(vehiclesArray => vehiclesArray.filter(vehicle => vehicles.indexOf(vehicle.Id) > -1)),
      // add selected flag and toggle function to vehicles
      map(vehiclesArray => vehiclesArray.map(vehicle => {
        vehicle.selected = false;
        vehicle.toggleSelected = () => {
          const selected = (vehiclesArray.filter(selectedVehicle => selectedVehicle.selected === true)).length;
          // don't toggle if it is the last active vehicle
          if ( !vehicle.selected || selected > 1) {
            vehicle.selected = !vehicle.selected;
            this.selectedVehicles = vehiclesArray.filter(selectedVehicle => selectedVehicle.selected);
          }
          return vehicle.selected;
        };
        vehicle.toggleSelected();
        return vehicle;
      }))
    );
  }
  ngAfterViewInit() {

    // synchronize height of package cards after all packages got rendered
    this.packageElements.changes.pipe(
      withLatestFrom(this.packages$),
      map(([change, packages]) => {
        if (packages.length === this.packageElements.toArray().length) {
          return this.uiService.getHeightOfHighestElement(this.packageElements.toArray());
        }
      })
    ).subscribe( (height) => {
        this.height = height;
        this.cd.detectChanges();
    });
  }
}

Answer 1

为了将来引用，这是此处描述的问题 angular-pitfall-multiple-http-requests-with-rxjs-and-observable-async/

Each async pipe triggers a new HTTP request, because each result$ | async creates a new subscription/stream to the result$ Observable.

This is not a bug, but the nature of how Observables are implemented to facilitate flexibility.

You can think of the Observable result$ as a function declaration, and that each result$ | async is calling the same function.