How to trigger an event only when response is recieved from multiple APIs?

Question

I am working on a component, where I need to call two APIs parallelly. And I want to call a method only when both the API calls are resolved.

ngOnInit() {
    this.serviceOne.someApi().subscribe((res) => {
        this.response1 = res;  
    });
    this.serviceTwo.someApi().subscribe((res) => {
        this.response2 = res;  
    });
}

I want to call a method only when this.response1 and this.response2 is getting populated.

Currently, I am wrapping the logic inside the method with an if statement.

someMethod() {
    if(this.response1 && this.response2) {
        //logic
    }
}

and putting someMethod() inside subscribe() of both the api calls.

What is the best way to achieve this?

Adrita Sharma · Accepted Answer · 2019-10-30T12:51:53.090

3

You can use forkJoin to achieve it.

Try like this:

Working Demo

  ngOnInit() {    
    const request1 = this.serviceOne.someApi();
    const request2 = tthis.serviceTwo.someApi();

    forkJoin([request1, request2]).subscribe(data => {
      this.response1 = data[0];
      this.response2 = data[1];
      this.someMethod();
    });
  }

edited Oct 30 '19 at 12:51

answered Oct 30 '19 at 12:36

Adrita Sharma

21,581
10
69
79

Does it wait if one API takes a longer time to resolve?? – LALIT KANTA DIBYADARSHAN Oct 30 '19 at 12:54
Yes. Read https://www.learnrxjs.io/operators/combination/forkjoin.html – Adrita Sharma Oct 30 '19 at 12:55

score 0 · Answer 2 · edited Oct 30 '19 at 20:40

0

same answer with array destructuring.

forkJoin([
  this.serviceOne.someApi(),
  this.serviceTwo.someApi(),
]).subscribe(data => {
    let [serviceOneResponse, serviceTwoResponse] = data;
    // use responses.
});

edited Oct 30 '19 at 20:40

Dharman

30,962
25
85
135

answered Oct 30 '19 at 12:57

Metinerk

39
5

How to trigger an event only when response is recieved from multiple APIs?

2 Answers2