Using Angular Http.Get() synchronously

Question

I have a very simple requirement:

I'm writing a authorization service for an Angular site (Angular 7 it makes a difference). The service needs a "hasPermission" function which takes a user and a resource name. It makes an Http.Get() call to a backend to determine whether or not the user is authorized to access that resource. When, and ONLY WHEN, the data comes back from the Get() call, it returns true or false.

I have been searching the web for about a week trying to figure out how to do it. My problem is that the Http.Get() returns an observable AND THEN CONTINUES. Which means the function returns before it receives the data back on which to make a decision. The same thing if I use the Http.Get().toPromise() - the function continues as soon as the promise is created.

It seems like every "solution" I read is some variant of "return a promise" or "return an observable". But then it's analagous to "It's turtles all the way down" -in this case, it's promises (or observables) all the way up. At some point there needs to be a method that waits for and returns the data, not a promise of the data or an observable of the data.

I need some way to add a "waitForDone" after creation of the observable or promise and before the function returns its value, but from everything I can find, you can't do that in JavaScript because it's single-threaded. Note, I can't, as some solutions have suggested, "Just put the code after the http.get(...) in a separate function and call it from success callback" because the code to be execute needs to return from this function.

And async/await doesn't do it, because async turns the whole function into a promise, so, even though the await may wait for the Get() to return the data, the function will still have gone on and returned to the caller before it had the data it needed.

It doesn't seem to me that this is an unusual requirement. While it's nice to be able to issue a request then go do something else while you wait for the data to come back, there have to be times when you MUST HAVE the data before you can do anything else.

Any help is appreciated.

Probably what you need though, is an *ngIf="" in your template to await the answer... or separate the logic inside your function to another function function myLogicAfterGetCall(resReqValue) {} and call that inside the response of the get. this.myService.get(res => this.myLogicAfterGetCall(res)). If this doesn't make sense do ask — Francisco Santorelli
– Francisco Santorelli, Commented Apr 18, 2019 at 16:51
hello dave, i am afraid you try too hard to use imperative and synchronious paradigm on javascript reactive world. i highly recommend you to have look on rxjs. Otherwise you have awesome live sample of how to handle authentification in Angular. — Yanis-git
– Yanis-git, Commented Apr 18, 2019 at 17:06
Can you write a dummy on stackblitz what you are trying to accomplish? — Lucho
– Lucho, Commented Apr 18, 2019 at 17:42
There used to be synchronous HTTP calls. Firefox and Chrome, for example, deprecated them in 2014, Edge in 2015. But what do you really need that for, anyway? You can disable potentially harmful user interactions (buttons, links, what else) until the response comes, but I don't understand the need to block everything, down to tooltips and responsive layout adjustments (that aren't pure CSS). — mbojko
– mbojko, Commented Apr 18, 2019 at 17:51

mbojko · Accepted Answer · 2019-04-18 16:52:35Z

2

You can use the async-await syntax: instead of

get(someArgs).subscribe(doStuff);

you could put async in the function declaration and then go as follows

const someVal = await get(someArgs).toPromise();
doStuff(someVal); // this line won't execute until get() has resolved the promise

But, fundamentally, it is turtles all the way down. It's syntactic sugar atop of the Promise recipe, and that's what it gets transpiled to (if you transpile it).

answered Apr 18, 2019 at 16:52

mbojko

14.8k2 gold badges21 silver badges28 bronze badges

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

Collectives™ on Stack Overflow

Using Angular Http.Get() synchronously

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related