Asynchronous problems encountered during the js interview process

Macro tasks and micro tasks in js

(Recommended tutorial: js tutorial)

During the interview process, Basically, the interviewer will ask you some promise questions. Promise is a new content of es6, which is mainly used to optimize asynchronous issues. In the written examination, you are often asked to write some execution results of promises and setTimeout, so you must know the concepts of macro tasks and micro tasks!

Why use promise

If you have experienced previous jquery development projects, you will encounter the following problems: callback 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 results of the first request, so I have to keep nesting like this. Ajax is asynchronous, and the results inside cannot be obtained from the outside. The problem caused by this kind of code is that it is difficult to debug, the coupling is very high, and it will be a headache to change one place later! Maintenance is very difficult and code readability is poor.
So promises were introduced to optimize ajax. Axios is a request encapsulation library based on promises. Their bottom layer is based on the js native XMLHTTPREQUEST.
promise().then().catch() chain style call, multiple requests can be promise().then().then().

What are macro tasks and what are micro tasks?

When thinking about this problem, you must know that JavaScript is a single-threaded scripting language, that is, its code can only It is executed sequentially from top to bottom, and only one thing can be done at a time. Asynchronous is achieved through callback functions. Why not design js as a multi-threaded language? The purpose of the language determines its characteristics. js was originally used for form validation and regular judgment, and for manipulating DOM elements. If js has multiple threads, one performs modification of DOM elements and another performs deletion, then the browser will be confused. What should I do? ? ? So the purpose of the language determines its characteristics, but the browser is multi-threaded, and there are other threads in addition to the main thread.

When the js main program is executed, the synchronization code on the main program is first run. When it encounters setTimeout or setInterval, it is put into the macro queue. When it encounters the callback of promise, it is put into the micro queue. Program execution first executes the main program code, then executes the nextTick code, then microtasks, and finally macrotasks. The tasks in the task queue are queued for execution in sequence. async and await are used in conjunction, and await is followed by a promise object. Let’s take a look at the following paragraph. Code:

 setTimeout(function(){console.log(1)},0);  // 进入宏任务队列，最后执行宏任务
 new Promise(function(resolve,reject){
     console.log(2); //这句代码在promise构造器，同步执行
     resolve(); // 执行了resolve再把任务放入微队列
 }).then(function(){console.log(3)
 }).then(function(){console.log(4)});
 process.nextTick(function(){console.log(5)});
 console.log(6); // 主程序代码
 // 输出2,6,5,3,4,1
 
// 下面这个进阶代码
setTimeout(function(){console.log(1)},0); // 进入宏任务排序为1
new Promise(function(resolve,reject){
     console.log(2);
     // promise中执行完resolve()才会执行then(),而这里的resolve在宏任务里，执行完主程序代码后，还得先执行先进入宏队列中的程序
     setTimeout(function(){resolve()},0) // 进入宏任务排序为2
 }).then(function(){console.log(3)
 }).then(function(){console.log(4)});
 process.nextTick(function(){console.log(5)});
 console.log(6);
 // 输出的是  2 6 5 1 3 4

Look at the execution sequence in async and await

The code is as follows (example):

async function async1() {
    console.log(1); 
    await async2();
    console.log(2); //这里要等await执行成功才会执行，进入微任务，排序1
}
async function async2() {
    console.log(3);
}
console.log(4); //主程序代码
setTimeout(function() {
    console.log(5);
}, 0) //进入宏任务，最后执行
async1();
new Promise(function(resolve) {
    console.log(6); // 这句同步执行
    resolve(); 
}).then(function() {
    console.log(7); //进入微任务，排序2
});
console.log(8); // 主程序代码
// 输出的是  4,1,3,6,8,2,7,5

Summary

JS is a single-threaded language. Its purpose determines its characteristics. Asynchronous operations use the event loop mechanism to execute synchronous code first, then microtasks, and finally macrotasks. The tasks in the two task queues are queued and executed sequentially. The code behind await must wait for the promise to return the result before executing the following code. Await and async are syntax sugar for the generator function.

The above is the detailed content of Asynchronous problems encountered during the js interview process. For more information, please follow other related articles on the PHP Chinese website!