What is a ZoneAwarePromise

user_515774 0
Viewed 37345

I am using angular 6. One of the http calls returns a ZoneAwarePromise when I try to convert the Observable into a Promise. Also the then block is not getting called.

const login = this.authService.login(email, password).toPromise()
login.then(() => {\* not getting called*\})

Can someone explain what is a ZoneAwarePromise ?

es6-promise angular
3 Answers

Angular relies heavily on zone.js to persist an execution context across asynchronous tasks. It's wrapped up in an injectable service called NgZone.

These Zones wrap up common JS objects meant to run async tasks, which include Promises. This is maintained in a Zone as a Task, MicroTask, etc.

A ZoneAwarePromise is still functionally identical to a normal Promise, but internally stays aware of a Zone's execution context, and the Zone can know when that Promise completes.

In Angular, this execution context almost always means running change detection.

user_56835790

We use Angular because we can only change model and it will update view automatically for us, based on declarative templates that we provide via metadata.

The way Angular handles this is by intercepting three types of events:

  • user events (like clicks),
  • clocks (setTimeout, setInterval) and
  • network (fetch, XHR, HttpClient).

Interally, this is done via zones. When you load setTimeout, it actually swaps the default setTimeout implementation with its own implementation, but with the same signature. When you call setTimeout, you're not even aware that you're using zones.

On a very high-level, it pretty much works like this:

const originalSetTimeout = window.setTimeout
window.setTimeout = (fn, time) => {
  originalSetTimeout(() => { fn(); updateView() }, time)
}

It pretty much just executes your function as usual and then calls another thing -- which is used by Angular do update the view.

ZoneAwarePromise is just a way to use Promise so that zone is aware of it. You can find implementation details in source code of Zone.js, but that's the gist of it.

user_21312860

Promise is a constructor that at run time in the browser resolves to ZoneAwarePromise() from zone.js. Please visit the following link to get more insights.

user_16013990
Related