How to put on hold all other httpclient API request until main API request is finished and resume other hold API request?

Question

I am to loading some main data just after user logged in and in main layout page. There is multiple API request are done for load main data. so i want to put on hold other API request until the main api request is finished

The main API requests is done in sequence manner also.

I have already added HttpInterceptor for adding some headers and all.

Explaining what happening right now.

i have _layout components and its have tags so all other pages will loads in this components.
_layout is loading some main data on ngOnInit which will use in further API requests

Issue is while refreshing the page,other API request is not waiting for to complete the requests of main API requests which started in _layout components.

we cant identify how many API requests will call after _layout components init because all routing is done in this.

check [concatMap](https://www.learnrxjs.io/operators/transformation/concatmap.html) — noririco, Oct 15 '19 at 07:45
Nested subscribe will not work for me because, while refreshing page i cant assume how many api request is done before main API. i have list of main api. i am not sure how resolve can help for this. — Rajdip Khavad, Oct 15 '19 at 07:53
show us the code, what have you tried? where you're facing issues? — Hemendra, Oct 15 '19 at 08:14
You can implement queue for http, Refer this https://stackoverflow.com/questions/48021728/add-queueing-to-angulars-httpclient — hrdkisback, Oct 15 '19 at 09:31

score 2 · Answer 1 · answered Oct 15 '19 at 09:15

2

In your _layout component template, create an ng-container tag and put all your child component tags inside the ng-container. Now you can have an ngIf on the ng-container tag to not render the child components if main api has not given response yet. This way the child components Api will not get triggered. Hope this helps.

answered Oct 15 '19 at 09:15

Manu Mathew

140
1
8

Please accept the answer if it worked out for you. Thanks. – Manu Mathew Oct 17 '19 at 03:59

score 1 · Answer 2 · answered Oct 15 '19 at 10:53

I think for this you should use .flatMap() operator of rxjs. This operator is generally used to call the api's in sequential manner.

Please check the below links for more information: http://reactivex.io/documentation/operators/flatmap.html https://stackoverflow.com/a/40666072/9766269

score 0 · Answer 3 · answered Oct 15 '19 at 07:59

this.http.get(url).subscribe(res => {
         // Main Api is Called here
        }, error => {
          console.log(error);
        }, () => {
          console.log('When api Request is Complated');
            // Rest of the API Called here When Main Api In Completed.
        }
      );

Manu Mathew · Answer 4 · 2019-10-15T09:14:11.247

Try this:

this.http.get(mainApiUrl).pipe(
    switchMap(
        mainApiResponse => {
        // mainApiResponse has result from main api
        return forkJoin(
            [
                this.http.get(otherApiUrl1),
                this.http.get(otherApiUrl2)
            ]
        ).pipe(map(otherResponsesArr => [mainApiResponse, ...otherResponsesArr]))
    })
).subscribe(responseArr => {
        mainResponse = responseArr[0];
        otherResponse1 = responseArr[1];
        otherResponse2 = responseArr[2];
    });

Explanation

The main api is called and on getting response, we use the switchmap operator to retrieve the output of first api call, cancel the subscription and pass the result to call the next set of api using forkjoin (actual usecase may vary).

i am appreciating your efforts, please can you read question once again, i have updated it. — Rajdip Khavad, Oct 15 '19 at 09:03

How to put on hold all other httpclient API request until main API request is finished and resume other hold API request?

4 Answers4