forkjoin deprecated in Angular 10 alternative

Question

Below is my code:

 async getBranchDetails()  ----component  method

  {
    let banks = this.bankDataService.getBanks();
    let branchTypes = this.branchDataService.getBranchTypes();

    forkJoin([banks,branchTypes]).subscribe(results => {
              this.setFormBankData(results[0]);
              this.setFormBranchTypeData(results[1]);
            });
  }

----service

 async getBanks(): Promise<IBankResponse[]> {
        return await  this.httpClient.get<Result<IBankResponse[]>>(baseUrl + '/Bank/GetBanks')
        .pipe(map( res => res.data)).toPromise();
    }

Fork join is showing deprecated. Is there any alternative use with async/await. Thanks.

EDIT: i dont no whether it isright or not but used asyn/await..My final code as below

  async getBranchDetails()

  {
    let banks =  await this.bankDataService.getBanks();
    let branchTypes= await this.branchDataService.getBranchTypes();
    this.setFormBankData(banks);
    this.setFormBranchTypeData(branchTypes);
   
  }

Answer 1

You are mixing Observables and Promises. Either use Observables and RxJS, or stick to Promises.

Observables approach (recommended):

getBanks(): Observable<IBankResponse[]> {
   return this.httpClient.get(baseUrl + '/Bank/GetBanks')
     .pipe(map(res => res.data));
}

const banks$ = this.bankDataService.getBanks();
const branchTypes$ = this.branchDataService.getBranchTypes();

forkJoin([banks$, branchTypes$]).subscribe(results => {
  this.setFormBankData(results[0]);
  this.setFormBranchTypeData(results[1]);
});

Promises approach:

getBanks(): Promise<IBankResponse[]> {
  return this.httpClient.get<Result<IBankResponse[]>>(baseUrl + '/Bank/GetBanks')
    .pipe(map( res => res.data)).toPromise();
}

When working with Promises, you can use Promise.all to wait for all requests to finish:

const banks = this.bankDataService.getBanks();
const branchTypes = this.branchDataService.getBranchTypes();

Promise.all([banks, branchTypes]).then(results => {
  this.setFormBankData(results[0]);
  this.setFormBranchTypeData(results[1]);
});