How to call multiple http service in parallel from angular component

Question

How can I call my methods from component only after multiple service call is completed?

I have a service.ts file which has one method that will return the array with different values based on the key (i.e. obj here) as shown below:-

getdata(type:numer)
 {
   // make a post call to get the data
 }

Here, in component.ts file, I have two methods which will call the above service method as shown below:- These 2 methods are used to fill the dropdown in html when clicked on edit form button

method1()
{
   this.service.getdata().subscribe((res: any) => {
      data1 = res;
    });
}

method2()
{
   this.service.getdata().subscribe((res: any) => {
      data2 = res;
    });
}

I have one more method which will fill the form data on edit click

fillForm()
{
    // do something
}

Now, my requirement is I need to call method1 and method2 in component.ts and also I need to call this fillForm method only after above two methods are completed as I need to make sure the dropdown should be filled before editing the form

Have you tried adding callback() functions so that when a method completes the callback() is called and you know that method1 has finished — Aida
– Aida, Commented Aug 31, 2018 at 12:25

Augustin R · Accepted Answer · 2018-08-31 12:24:54Z

2

Hello if you are using rxjs 5 you can use Observable zipping :

Observable.zip(
    this.method1(),
    this.method2()
).subscribe(
    ([dataFromMethod1, dataFromMethod2]) => {
        // do things
    },
    (error) => console.error(error),
    () => {
        // do things when all subscribes are finished
        this.fillform();
    }
)

With rxjs 6, simply change Observable.zip by forkJoin :

forkJoin(
    this.method1(),
    this.method2()
).subscribe(
    ([dataFromMethod1, dataFromMethod2]) => {
        // do things
    },
    (error) => console.error(error),
    () => {
        // do things when all subscribes are finished
        this.fillform();
    }
)

You will need to change your methods to return Observables :

method1()
{
   return this.service.getdata();
}

method2()
{
   return this.service.getdata();
}

answered Aug 31, 2018 at 12:24

Augustin R

7,8593 gold badges30 silver badges54 bronze badges

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

3 Comments

David Pullar Over a year ago

zip is not parallel, it's like a zipper on a jacket, one after the other until completed, combineLatest, merge and forkJoin are acceptable alternatives.

Augustin R Over a year ago

In rxjs 5, using Observable.zip make parallel calls. However, I agree with your comment for rxjs6, that's why I used forkJoin

Frank Fajardo Over a year ago

Note that this.fillform() will not be executed when any of the Observables throws an error. Source: reactivex.io/documentation/operators/subscribe.html. For things you need to do whether there are errors or not, you should use .finally()

Collectives™ on Stack Overflow

How to call multiple http service in parallel from angular component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related