Angular 10 introduces a new approach to handling concurrency called "forkJoin"

Question

Angular 10 introduces a new approach to handling concurrency called "forkJoin"

Here is the code I have:

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

angular typescript promise rxjs

Answer 1

Answer №1

You seem to be mixing Observables and Promises. It's best to choose one approach and stick with it - either Observables and RxJS, or just use Promises.

For the 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]);
});

If you prefer the Promises approach:

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

When using Promises, you can utilize Promise.all for handling multiple requests:

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

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

Answer 2

You seem to be mixing Observables and Promises. It's best to choose one approach and stick with it - either Observables and RxJS, or just use Promises.

For the 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]);
});

If you prefer the Promises approach:

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

When using Promises, you can utilize Promise.all for handling multiple requests:

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

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

Angular 10 introduces a new approach to handling concurrency called "forkJoin"

Answer №1

Similar questions

Looking to categorize and sum the values within an array of objects using JavaScript?

Developing Your Own Local Variable in Angular with Custom Structural Directive ngForIn

Changing the name of a tab within a p-tabview

Creating a constant.ts file to define universal constantsWould you like assistance with anything else

What causes TypeScript to struggle with inferring types in recursive functions?

No routes found to match. URL Segment: ''. This issue occurs when attempting to utilize child routes with Angular 2

Exploring the keyof operator in Typescript for object types

Is there a similar feature to RxJs version 4's ofArrayChanges in RxJs version 5?

When using Angular, it is important to remember that calling `this.useraccount.next(user)` may result in an error stating that an argument of type 'HttpResponse<any>' cannot be used with a 'Useraccount' balance

Employing the reactive forms approach for validation instead of ngModel logic

Use the res.json method in express.js to automatically generate a predefined response structure

Subclass method overloading in Typescript

Tips for resolving: Dilemma - Angular configuration loaded in both synchronous and asynchronous manner

Associate text with a color from a predetermined list (JavaScript)

Logging out of an application that utilizes IdentityServer4 with ASP.NET Core MVC and Angular integration

TypeScript is failing to identify a correctly typed property

Utilizing Ngrx store for Reacting form validation with the integration of asynchronous validation

Unable to link with 'NgModel' as it is not recognized as a valid property of 'ion-input'

The JSONP request failed with an error stating: ReferenceError: document is not defined

What is the reasoning behind exporting it in this manner in the index file?