使用服务文件时链 http 请求

Question

I wish to combine 2 http requests together to make this a little more elegant however most examples I see online use mergemap however they are not making the http requests via a service file. Any ideas on how I can approach this? I have the following code:

ngOnInit() {
this.getMatrixData();
}

getMatrixData() {

      this.httpService.getPackageAvailabilityListForPricingMatrix()
          .subscribe((res) => {

              this.packageListItems = res.body;
              this.getGradeItems();

          });

  }

getGradeItems() {
      this.httpService.getHospitalityGradesList()
          .subscribe((res) => {

              this.allGrades = res.body;
              this.makeMatrix();
          });
  }

makeMatrix()
{
console.log("Now combine data");
}

My service file just returns the following:

getPackageAvailabilityListForPricingMatrix(): Observable<any> {
        return this.http.get("apiPath", { responseType: 'json', observe: 'response', headers: new HttpHeaders().set("Authorization", "bearer " + this.getUserToken() + " ") });
    }

getHospitalityGradesList(): Observable<any> {
        return this.http.get("apiPath", { responseType: 'json', observe: 'response', headers: new HttpHeaders().set("Authorization", "bearer " + this.getUserToken() + " ") });
    }

Answer 1

I think you can make use of forkJoin that will execute both requests together

makeMatrix() {
forkJoin(this.httpService.getPackageAvailabilityListForPricingMatrix(), 
this.httpService.getHospitalityGradesList())
 .subscribe(
  ([r1, r2]) => {

  }
 );
}

Answer 2

You can use combineLatest from rxjs .

import { combineLatest } from 'rxjs';
ngOnInit() {
    combineLatest([
        this.httpService.getPackageAvailabilityListForPricingMatrix(),
        this.httpService.getHospitalityGradesList()
    ]).subscribe(
       ([res1, res2]) => {
          // res1 contains response of getPackageAvailabilityListForPricingMatrix()
          // res2 contains response of getHospitalityGradesList()
          this.makeMatrix();
       }
    );
}

PS : This is only possible when your service function returns observable and you dont have dependent API calls.

Answer 3

This is easily done with a mergeMap , or the more semantically correct one concatMap :

ngOnInit(): void {
  this.this.httpService.getPackageAvailabilityListForPricingMatrix().pipe(
    concatMap((res) => {
      this.packageListItems = res.body;

      return this.httpService.getHospitalityGradesList()
    }),
    tap((res) => this.allGrades = res.body)
  ).subscribe(() => {
    this.makeMatrix()
  });
}

---

if the second request does not depend on the first request, you can also use forkJoin , which is again semantically more correct than combineLatest . You have to pass in an array of observables, of an object map. The observable paramater list is deprecated:

ngOnInit(): void {
  forkJoin([
    this.httpService.getPackageAvailabilityListForPricingMatrix(),
    this.httpService.getHospitalityGradesList()
  ]).subscribe(([ packageListItems, allGrades ]) => {
    this.pacakgeListItems = packageListItems.body;
    this.allGrades = allGrades.body;
  });
}

---

A third option would be to have the nice possibility of using the async pipe from angular, which will make your code even cleaner:

readonly packageListItems$ = this.httpService.getPackageAvailabilityListForPricingMatrix().pipe(
  map(({ body }) => body), 
  shareReplay(1)
);

readonly allGrades$ = this.httpService.getHospitalityGradesList().pipe(
  map(({ body }) => body), 
  shareReplay(1)
);

All you need to do when you use this in your template is:

<div *ngFor="let package of packageListItems$ | async"></div>

This way you don't have to subscribe in your component, which is sort of frowned upon, and also when you navigate away from the component and the request is not finished yet, it is already automatically unsubscribed and won't trigger any unwanted effeccts.

_{I've added the shareReplay for convenience. This will replay the last value on subscription. This way if you subscribe to it in your code to get the last value, it does not fire the http request again but just returns the last value}

side-note 2: If you do use forkJoin , make sure your httpService catches any network error it might receive. If one of the observables fail, the entire forkJoin will fail and any request that did succeed will not reach the subscriber. So do use catchError inside your httpService and perhaps return an empty array when the response is supposed to be an array.