The execution sequence of async/await, macro tasks and micro tasks

One 、async

belt async Keyword function , Is to declare asynchronous functions , The return value is promise object , If async The keyword function does not return promise, Will use automatically Promise.resolve() packing .

  The return value is  Promise {<resolved>: "test"}.

Two 、await

await Wait for the result of the expression on the right , The result is promise Object or other value .

If it doesn't wait for one promise object , that await The result of this expression is what it's waiting for .

If it waits for one promise object ,await And he got busy , It blocks the rest of the code , Waiting for the promise object resolve, Then get resolve Value , As await The result of an expression .

because test() Blocking caused by ,console.log('end') Will wait for two seconds to execute

So in order to avoid blocking ,await Must be used in async Function ,async Function calls do not block .

3、 ... and 、async/await Execution order of

encounter await Will block the following code , Execute first async External sync code , Synchronization code execution completed , Back to async Inside , Carry on await Later code .( Understand the above instructions well . in other words ,await It will only block the current async The code inside the method , It will not affect the execution of external code )

Execution results ：

 

First, execute the macro task , perform test1 function , perform console.log('statr test1')

· encounter await, Execute the right first test2 Medium console.log('test2'), Interrupt the following code , perform test1 External sync code

· perform console.log('start async');

· encounter setTimeout, Push to the next macro task queue

· perform Promise Synchronization code inside console.log('promise1')

· Run to the promise().then, Found to be promise object , Push to the micro task queue

· perform console.log('end async')

· test1 After the execution of the external synchronization code , go back to test1 in ,console.log(await test2()) Return... After execution Promise {<resolved>: "return test2 value"}, yes promise object , Push to the micro task queue

· At this point, the first macro task ends , Perform all the micro tasks , Because the micro task queue is first in first out , So first execute console.log('promise2'), After execution console.log('return test2 value')

· perform test2 After completion , The following code is no longer blocked , perform console.log('end test1');

· Execute the next macro task , The perform console.log('setTimeout');

  Four 、 Common macro tasks and micro tasks

  Macro task ：script、setTimeOut、setInterval、setImmediate

Micro task : promise.then,process.nextTick、Object.observe、MutationObserver

Be careful ：Promise It's a synchronization task            

The execution order of macro tasks and micro tasks ：

• Execute macro task script,
• Get into script after , All synchronous tasks are executed by the main thread
• All macro tasks are put into the macro task execution queue
• All the micro tasks are put into the micro task execution queue
• Clear the micro task queue first ,
• Take another macro task , perform , Then clear the micro task queue
• In turn, cycle