CODEWITHSUNDEEP
angularasynchronousasync-await
Jay
Jay

Reputation: 2527

How to use Async in Angular

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.
}

Upvotes: 0

Views: 4759

Answers (3)

Alvin Saldanha
Alvin Saldanha

Reputation: 916

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.

Upvotes: 4

thanzeel
thanzeel

Reputation: 602

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

Upvotes: 2

Williamz007
Williamz007

Reputation: 31

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
}

Upvotes: -1

Related Questions