Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "what is the working principle of zone.js in Angular". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "what is the working principle of zone.js in Angular" can help you solve the problem.

What is Zone? The official documentation explains that Zone is an execution context that spans multiple asynchronous tasks. In a word, Zone has a particularly powerful ability to intercept or track asynchronous tasks. Next we will show its ability through an example and briefly analyze the working principle behind it.

Bind ErrorCause Error function main () {b1.addEventListener ('click', bindSecondButton);} function bindSecondButton () {b2.addEventListener (' click', throwError);} function throwError () {throw new Error ('aw shucks');} main ()

This is a simple HTML page. When the page is loaded, a click event is added to the first button, and the function of the click event function is to add a click event to the second button, while the click event function of the second button is to throw an exception. We click the first button and the second button in turn, and the console displays as follows:

(index): 26 Uncaught Error: aw shucks at HTMLButtonElement.throwError ((index): 26:13)

But if we start the running code through zone.js, what's the difference in the console output? let's adjust the startup code first:

Zone.current.fork ({name: 'error', onHandleError: function (parentZoneDelegate, currentZone, targetZone, error) {console.log (error.stack);}}) .fork (Zone.longStackTraceZoneSpec) .run (main)

The console output is as follows:

Error: aw shucks at HTMLButtonElement.throwError ((index): 26:13) at ZoneDelegate.invokeTask (zone.js:406:31) at Zone.runTask (zone.js:178:47) at ZoneTask.invokeTask [as invoke] (zone.js:487:34) at invokeTask (zone.js:1600:14) at HTMLButtonElement.globalZoneAwareCallback (zone.js:1626:17) at _ Elapsed_571_ms__At__Mon_Jan_31_2022_20_09_09_GMT_0800_ (localhost) at Object.onScheduleTask (long-stack-trace-zone.js:105:22) at ZoneDelegate.scheduleTask (zone.js:386:51) at Zone.scheduleTask (zone.js:221:43) at Zone.scheduleEventTask (zone.js:247:25) at HTMLButtonElement.addEventListener (zone.js:1907:35 ) at HTMLButtonElement.bindSecondButton ((index): 23:10) at ZoneDelegate.invokeTask (zone.js:406:31) at Zone.runTask (zone.js:178:47) at _ Elapsed_2508_ms__At__Mon_Jan_31_2022_20_09_06_GMT_0800_ (localhost) at Object.onScheduleTask (long-stack -trace-zone.js:105:22) at ZoneDelegate.scheduleTask (zone.js:386:51) at Zone.scheduleTask (zone.js:221:43) at Zone.scheduleEventTask (zone.js:247:25) at HTMLButtonElement.addEventListener (zone.js:1907:35) at main ((Index): 20:10) at ZoneDelegate.invoke (zone.js:372:26) at Zone.run (zone.js:134:43)

By comparison, we know that when zone.js is not introduced, we can only know through the error call stack that the exception is thrown by the click function of button 2. After the introduction of zone.js, we not only know that the exception is thrown by the click function of button 2, but also know that its click function is bound by the click function of button 1, and even know that the initial application startup is triggered by the main function. This ability to track multiple asynchronous tasks continuously is extremely important in large and complex projects, so let's take a look at how zone.js does it.

Zone.js takes over the asynchronous API provided by the browser, such as click events, timers, and so on. It is precisely because of this that it has a stronger ability to control and intervene in asynchronous operations and provides more capabilities. Now let's take the click event as an example and see how it does it.

Proto[ add _ EVENT_LISTENER] = makeAddListener (nativeAddEventListener,..)

In the above code, proto refers to EventTarget.prototype, which means that this line of code redefines the addEventListener function. Let's move on to see what the makeAddListener function does.

Function makeAddListener () {. / / key code 1 nativeListener.apply (this, arguments);. / / key code 2 const task = zone.scheduleEventTask (source,...).}

This function mainly does two things, one is to execute the addEventListener function provided by the browser itself in the custom function, and the other is to arrange an event task for each click function, which is also an important factor that zone.js has a strong ability to intervene in asynchronous API.

Now let's go back to the example at the beginning of this article to see why the console can output a complete function call stack. We just analyzed the makeAddListener function and mentioned that it arranges an event task for each click function, that is, the execution of the zone.scheduleEventTask function. The scheduling event task function actually executes onScheduleTask:

OnScheduleTask: function (..., task) {const currentTask = Zone.currentTask; let trace = currentTask & & currentTask.data & & currentTask.data [creationTrace] | | []; trace = [new LongStackTrace ()] .concat (trace); task.data [creationTrace] = trace;}

The complete function call stack output from the console at the beginning of the article is stored in currentTask.data [creationTrace], which is an array of LongStackTrace instances. Every time an asynchronous task occurs, the onScheduleTask function records the current function call stack storage. Let's take a look at the constructor of the class LongStackTrace:

Class LongStackTrace {constructor () {this.error = getStacktrace (); this.timestamp = new Date ();}} function getStacktraceWithUncaughtError () {return new Error (ERROR_TAG);}

What this.error stores is the function call stack, and the getStacktrace function usually calls the getStacktraceWithUncaughtError function. When we see new Error, we can probably know how the entire call stack came from.

This is the end of the introduction to "how zone.js works in Angular". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.