Angular 2. Make service call to wait until API returns the data

Question

Angular service call is as shown below,

SearchAssets(searchAssetsModel: SearchAssetsModel): Observable<any> {
    return this.httpClient.post<any>(this.webApiUrl + "SearchAssets/SearchAssets/", searchAssetsModel);
}

and in my component, am subscribing to the service as shown below,

this.searchAssetsService.SearchAssets(searchAssetsModel).subscribe(
  (data) => {}
)

For sure API will return the data after 2-3 minutes of service call but now the problem is Angular service is not waiting until the API returns the data. It will give 500 error response after waiting for 1.5 minutes.

2-3 minutes for a request ? You have a design issue there. Don't expect a user to wait 3 minutes for a request ... — , Jun 18 '19 at 09:57
@Maryannah This is not for outside users and API will return lakhs of data. — Rajashree, Jun 18 '19 at 10:11

score 0 · Answer 1 · answered Jun 18 '19 at 10:02

Try setting a timeout for the HTTP request: https://stackoverflow.com/a/52188748/6603599

Also, waiting 2-3 minutes for an API request is not in order. You can try getting the data as a Stream so that you can update the UI for every new element that is getting added to the Stream.

score 0 · Answer 2 · answered Jun 18 '19 at 19:48

Your saying below is incorrect.

...the problem is Angular service is not waiting until the API returns the data. It will give 500 error response after waiting for 1.5 minutes.

500 error is an internal error from your server side, meaning that there is a bug in your server side. could be a coding issue, or maybe your api is returning error on long session.

Angular Http service has nothing do to with your 500 error. You can test this by using a different client to check the api result (something like Postman).

Anyway, once you'll fix your server side the problem is gone.

Check out this developer.mozilla.org link for more details about 500 error. This text below is from this link:

The HyperText Transfer Protocol (HTTP) 500 Internal Server Error server error response code indicates that the server encountered an unexpected condition that prevented it from fulfilling the request.

score -1 · Answer 3 · answered Jun 18 '19 at 09:59

-1

You can use async and await to make the service call wait.

answered Jun 18 '19 at 09:59

Aqdas Malik

179
3

API methods are old and now can't make API methods _async_. Whatever the changes i make, I need to make in UI only. – Rajashree Jun 18 '19 at 10:05
Can you show how to use async and await on UI side (Angular)? It will be helpful. – Rajashree Jun 18 '19 at 10:16
I hope that this will help you out regarding how to use _async_ and _await_ in angular. [https://medium.com/@balramchavan/using-async-await-feature-in-angular-587dd56fdc77] – Aqdas Malik Jun 18 '19 at 10:22
I'm sorry for down voting, but this is not true. @Rajashree code is correct, your answer is not different from using a simple observable like she did. the problem is in server side. – benshabatnoam Jun 18 '19 at 19:51

score -1 · Answer 4 · edited Jun 18 '19 at 19:37

-1

You can try using a promise and run your code asynchronously like:

async SearchAssets(searchAssetsModel: SearchAssetsModel: Promise<any> {
  await return this.httpClient.post<any>(this.webApiUrl+"SearchAssets/SearchAssets/", searchAssetsModel).
  toPromise();
}

edited Jun 18 '19 at 19:37

benshabatnoam

7,161
1
31
52

answered Jun 18 '19 at 10:01

Cornelis Nick

11
7

I'm sorry for down voting, but this is not true. @Rajashree code is correct, your answer is not different from using a simple observable like she did. the problem is in server side. – benshabatnoam Jun 18 '19 at 19:50

Angular 2. Make service call to wait until API returns the data

4 Answers4