<>js Macro task and micro task in
During the interview , The basic interviewer will ask you some questions promise The question of ,promise yes es6 New content of , Mainly used to optimize the asynchronous problem . You are often asked to write in the written examination promise and setTimeout Results of implementation , So you have to know the concept of macro task and micro task !
<> Why use it promise
If you've been through the past jquery Development projects , You will encounter the following problems ： Back to hell
$.ajax({ ... success: function() { ... $.ajax({ ... success: function() { } })
... } })
<> Cause analysis ：
ajax Request nesting , The reason is that the parameters that my second request depends on are in the result of my first request , So it has to be nested all the time ,ajax It's asynchronous , You can't get the results out there . The problem with this code is that it's hard to debug , The coupling is very high , It's a headache to change one place later ! Maintenance is very difficult , Poor code readability .
So it was introduced promise yes ajax It is optimized ,axios It's based on promise A request encapsulation library for , They're all based on js Native XMLHTTPREQUEST.
promise().then().catch() call chaining , Multiple requests can promise().then().then().
<> What is a macro task , What is micro task ?
<>
When you think about it, you have to know javascript Is a single threaded scripting language , That is, its code can only be executed from top to bottom , You can only do one thing at a time , Asynchrony is achieved through callback functions . Why not put js How about a multithreaded language ? The use of language determines its characteristics ,js It was originally used for form validation and regular judgment , And operation DOM Elemental . If js There are multiple threads , An executive DOM Element modification , The other performs deletion , That browser is so stupid , What am I supposed to do ??? So the use of language determines its characteristics , But browsers are multithreaded , There are other threads besides the main thread .
When js When the main program is executed , Run the synchronization code on the main program first , encounter setTimeout or setInterval Put it in the macro queue , encounter promise And put it in the micro queue , The main program code is executed first , Reexecution nextTick code , Then micro task , Last macro task , Sequential queue execution in task queue ,async and await It's a complete set ,await One after the other promise object , Take a look at the following code ：
setTimeout(function(){console.log(1)},0); // Enter macro task queue , Finally, execute the macro task new Promise(
function(resolve,reject){ console.log(2); // This code is in the promise constructor , Synchronous execution resolve(); //
Implemented resolve Then put the task into the micro queue }).then(function(){console.log(3) }).then(function(){console
.log(4)}); process.nextTick(function(){console.log(5)}); console.log(6); //
Main program code // output 2,6,5,3,4,1 // Here's the advanced code setTimeout(function(){console.log(1)},0); //
Enter the macro task and sort it as 1 new Promise(function(resolve,reject){ console.log(2); //
promise Finished in resolve() Will be implemented then(), And here it is resolve In macro task , Execute the main program code after completion , You also have to execute the program that enters the macro queue first
setTimeout(function(){resolve()},0) // Enter the macro task and sort it as 2 }).then(function(){console.log(
3) }).then(function(){console.log(4)}); process.nextTick(function(){console.log(
5)}); console.log(6); // The output is 2 6 5 1 3 4
<> Look again async and await Execution order in
The code is as follows （ Examples ）：
async function async1() { console.log(1); await async2(); console.log(2);
// We have to wait here await Only when the execution is successful will it be executed , Enter micro task , sort 1 } async function async2() { console.log(3); }
console.log(4); // Main program code setTimeout(function() { console.log(5); }, 0)
// Enter macro task , Final execution async1(); new Promise(function(resolve) { console.log(6); // This sentence is executed synchronously
resolve(); }).then(function() { console.log(7); // Enter micro task , sort 2 }); console.log(8);
// Main program code // The output is 4,1,3,6,8,2,7,5
<> summary
js It's a single threaded language , Its use determines its characteristics , Asynchronous operation through the event loop mechanism , Execute synchronization code first , Then micro task , Last macro task , The tasks in the two task queues are executed in turn .await The following code has to wait promise Return the result and execute the following code ,await and async yes generator Grammatical sugar of function .
Technology
Daily Recommendation