- personal understanding
Foreground - what is the output of the code
We all know that when the queue is circular, the synchronous task is greater than the asynchronous task (the micro task in the asynchronous task is greater than the macro task), so guess what the output of this code is?
<script>
setTimeout(() => {
console.log(1);
}, 0);
new Promise(function(resolve,reject){
console.log(2);
resolve();
console.log(3);
}).then(function(){
console.log(4);
}).finally(function(){
console.log(5);
});
console.log(6);
</script>
- Have you made it? I will post the next answer
- Answer
2 3 6 4 5 1
Prospect analysis
-
First of all, you know that synchronous>asynchronous, but you may not be able to distinguish between synchronous and asynchronous. In fact, just remember the following asynchronous tasks, and the others are all synchronous tasks.
-
Asynchronous tasks :
setTimeout
,setInterval
,setImmediate(非标准)
,I/O
,UI rendering
,Promise
-
You must also know that the priority of promise is higher than other asynchronous tasks, because promise is a microtask
-
However, it is not entirely correct to say that promise is an asynchronous task , because when promise is created, it is executed synchronously,
nextTick
and it is executed asynchronously (that is, the method of .then, .catch). The following examples and foreground examples are very good illustrates the situationnew Promise(resolve=>{ console.log(1); resolve(3); }).then(num=>{ console.log(num); }); console.log(2); //依次为 123
We have learned the above points, let's take a look at the Promise.all method
- In the past, I have always wondered
Promise.all
why the method can encapsulate multiple promises into a new promise instance, and get the results synchronously. Now I know the reason. Let’s look at the following code first, and then explain it in detail later.
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.1.3/axios.min.js"></script>
<script>
let work1 = new Promise((resolve,reject)=>{
resolve(axios.get('https://api.oick.cn/dutang/api.php'))
});
let work2 = new Promise((resolve,reject)=>{
resolve(axios.get('https://api.oick.cn/yiyan/api.php'))
});
let work3 = new Promise((resolve,reject)=>{
resolve(axios.get('https://api.oick.cn/dog/api.php'))
});
Promise.all([work1,work2,work3]).then(res=>{
console.log(res);
})
</script>
-
Looking at the above code, I have been thinking about why this can be done concurrently. The concurrency in my mind is that this request is sent at the same time, but I searched and found that Promise.all can request multiple interfaces at the same time . This sentence The words are wrong~ I also debugged later and found that the ajax requests were not sent at the same time, but in order, and finally the returned results were processed uniformly
-
We know that js is single-threaded, so it is divided into synchronous and asynchronous. When we create a promise, it is executed synchronously, and it is
nextTick
executed asynchronously, so the functions in Promise are synchronous tasks.
let work1 = new Promise((resolve,reject)=>{
//同步任务
resolve(axios.get('https://api.oick.cn/dutang/api.php'))
});
let work2 = new Promise((resolve,reject)=>{
//同步任务
resolve(axios.get('https://api.oick.cn/yiyan/api.php'))
});
- So before the call
promise.all
, the ajax request has been sent, but it.then
is only received and processed in promise.all
It can be seen that if it is sent at the same time, I should say Promise.all to execute the ajax sending request when debugging, but I let work2
pause for a while before executing let work3
the code** and then prepare to execute* * promise.all
method, you will find that the data request status of the previous few days is 200, and this request is also sent before promise.all , instead of promise.all
sending an ajax request when executing this code
- After waiting for a long time, I terminated the debugging and found that the results returned by the normal output did not time out, so it means that we are not
promise.all
sending the request, but we arepromise.all
doing the final processing