Know when an angular HTTP call is done

Question

In my constructor I'm making a call to my server through a simple service like so:

this.pointService.index().subscribe(x => this.points = x.map(y => Point.fromJson(y)));

But then in my ngOnInit, in certain conditions, I need to use the value of this.points. I'm not sure how to "wait" in the ngOnInit for that service to be done before I use the value.

I'm not asking how to get the value from an async operation. I'm simply saying that I need to know when the this.points has a value so that another action in another method can know to run.

Possible duplicate of [How do I return the response from an Observable/http/async call in angular2?](https://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call-in-angular2) — JJJ, Jul 18 '18 at 17:46
@JJJ It's not a duplicate of that. I know how to return the response from an observable. The code I posted shows doing it. I'm asking how a completely different area of the program can know that `this.points` now has a value and so its code that relates can run. — Gargoyle, Jul 18 '18 at 18:12

score -1 · Answer 1 · answered Jul 18 '18 at 17:46

-1

Why not perform the rest of your initialization inside the subscription?

this.pointService.index().subscribe(x => {
    this.points = x.map(y => Point.fromJson(y)

    // Rest of initialization
}));

answered Jul 18 '18 at 17:46

Woohoojin

674
1
4
19

Because the rest can't run until the ngOnInit is run. – Gargoyle Jul 18 '18 at 18:01
Why not? Don't start calling other functions until this request is complete. – Woohoojin Jul 18 '18 at 18:03
I can start this call in the constructor. I can't all other methods until ngOnInit as they're not ready yet. That's why the constructor and ngOnInit are separate, right? So I want this first one to start as soon as it can. – Gargoyle Jul 18 '18 at 18:04
Isn't 'as soon as it can' the moment the subscription returns? – Woohoojin Jul 18 '18 at 18:05
This one runs regardless of anything else on the page. It can start immediately. The other ones depend on parameters, so those aren't available until ngOnInit. Depending on parameter passed in, I might have to run other items, I might not. – Gargoyle Jul 18 '18 at 18:06
Can you just check if `this.points` is undefined before you execute the code that uses it? `if(this.points) { // Code that uses this.points }` – Woohoojin Jul 18 '18 at 18:07
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/176273/discussion-between-gargoyle-and-christian-scillitoe). – Gargoyle Jul 18 '18 at 18:07

score -1 · Accepted Answer · answered Jul 18 '18 at 18:11

In my eyes, the clean way would be to wait until ngOnInit and then do it the way @Christian Scillitoe showed. It´s also the easiest way here.

this.pointService.index().subscribe(x => {
    this.points = x.map(y => Point.fromJson(y)

    // Rest of initialization
}));

If you really really really want to kickof the request 5 Milliseconds up front, than you CAN put it in the constructor, but then you have "save" the observable (for example in a BehaviorSubject) and then catch it in ngOnInit(). You HAVE to use something like an observable item (or a promise), because you can´t know how long the http Request will take.

Possible to do it in the constructor, but why breaking through walls, when there is a big door near?

warm regards.

Know when an angular HTTP call is done

2 Answers2