How to use Async in Angular

Question

Lets say I want to make 2 http calls which returns data and I want to call a function only after both the http calls have returned data so I can merge both the data.

 ngOnInit(): void {
    this.getData();
  }



getData() {

this.func1();
this.func2();
this.func3();

}

async func1() {
 this.service.call1().subscribe((data) => {
    this.data1 = data;
  });

}

async func2() {
  this.service.call2().subscribe((data) => {
    this.data2 = data;
  });
}

func3() {
//this should only get called when func1 and func2 have finished their http calls.
}

Please edit your question title to something that isn't just a repetition of information available from the tags. Your title should describe the problem you're having or question you're asking in a way that will have meaning to a future user of this site who is scanning a list of search results trying to find a solution to their problem. Your current title does nothing in that regard - it's just a regurgitation of the tags. — Ken White
– Ken White, Commented Aug 27, 2021 at 2:21
@Jay Not sure why you changed the accepted answer. Was there anything missing in my answer? — Alvin Saldanha
– Alvin Saldanha, Commented Sep 1, 2021 at 0:21

Alvin Saldanha · Accepted Answer · 2021-08-27 06:02:04Z

4

You should be using RxJS forkJoin to achive what you are trying to do.

forkJoin will wait for all passed observables to emit and complete and then it will emit an array or an object with last values from corresponding observables.

In angular you subscribe (await) to the values of an observable to receive data. In your example, anything in the subscribe would be executed once the response has been received from the server.

If `func3` is not an Observable

forkJoin([this.func1(),this.func2()]).subscribe(results => {
    let data1 = results[0];
    let data 2 = results[1];
    this.func3();
});

If `func3` is an Observable you have to pipe your calls

this.subscription.add(
        forkJoin([this.func1(),this.func2()])
            .pipe(
                switchMap(results => {
                    let data1 = results[0];
                    let data2 = results[1];
                    return func3();  
                 }
            ))
            .subscribe((value3) => {
                // value returned from the func3() observable
            })
    );

Note: Don't forget to unsubscribe all your subscriptions onDestroy.

edited Aug 27, 2021 at 6:02

answered Aug 27, 2021 at 3:20

Alvin Saldanha

91610 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

xinthose Over a year ago

I use try catch with async await all the time in Angular TypeScript. Subscribing creates chains of callbacks within each other.

Alvin Saldanha Over a year ago

@xinthose edited the async await comment. I manage the subscription chain using RxJS.

thanzeel · Accepted Answer · 2021-08-27 05:22:31Z

2

here is the latest syntax in angular

    forkJoin([httpcall1,httpcall2... httpcalln])
          .subscribe((resultArray) => {

            //once the data are recived they will be in the result array in order of the call
            console.log(resultArray[0]);
            console.log(resultArray[1]);
            
});

answered Aug 27, 2021 at 5:22

thanzeel

6001 gold badge7 silver badges19 bronze badges

Comments

Williamz007 · Accepted Answer · 2021-08-27 02:26:20Z

-1

You can call func2 inside func1 after getting the data, and func3 inside func2 so it will work one by one

getData() {
this.func1();
}

func1() {
this.service.call1().subscribe((data) => {
   this.data1 = data;
this.func2();
});

func2() {
this.service.call2().subscribe((data) => {
   this.data2 = data;
this.func3();
});

func3() {
// Your code here
}

answered Aug 27, 2021 at 2:26

Williamz007

311 silver badge5 bronze badges

3 Comments

Jay Over a year ago

I am trying to understand how to use async/await in this situation

Williamz007 Over a year ago

I found this answer stackoverflow.com/a/35612484/7137373

Alvin Saldanha Over a year ago

Never subscribe to an observable inside a subscribe! You will run into race conditions that'll fail randomly.

Collectives™ on Stack Overflow

How to use Async in Angular

3 Answers 3

If `func3` is not an Observable

If `func3` is an Observable you have to pipe your calls

2 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

If `func3` is not an Observable

If `func3` is an Observable you have to pipe your calls

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related