The question of whether the promise of js is synchronous or asynchronous and the reason why promise.all can request multiple interfaces at the same time is the wrong answer

  • 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, nextTickand it is executed asynchronously (that is, the method of .then, .catch). The following examples and foreground examples are very good illustrates the situation

     new 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.allwhy 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 nextTickexecuted 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 .thenis 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 work3the code** and then prepare to execute* * promise.allmethod, 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.allsending 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.allsending the request, but we are promise.alldoing the final processing

Guess you like

Origin blog.csdn.net/u014582342/article/details/127942272