What is a ZoneAwarePromise

Question

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 t

Answer 1

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.