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);
   
  }

Solution

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));
}

let banks = this.bankDataService.getBanks();
let 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:

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

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

Comments

[Ajt]

Thanks a lot..one last query in observable / promise 2 different request / only one (request goes to server?

[Ajt]

i have updated final code in question. Please let me know if it wrong

[JSON Derulo]

@Ajt Your final code is also fine. But please not that the requests will be made sequentially and not simultaneously. If you use my code example, both requests will be made simultaneously, which is usually a little bit faster.