Promise链式嵌套执行顺序(带详细执行过程)

1,797 阅读1分钟

第一篇掘金文章,最近看到一个题目,如下:

代码

new Promise(resolve => {
   console.log("Promise");
 
   resolve();
 })
 
   .then(function() {
     new Promise(resolve => {
       console.log("promise1");
 
       resolve();
     })
 
       .then(function() {
         console.log("promise1-1");
       })
 
       .then(function() {
         console.log("promise1-2");
       })
 
       .then(function() {
         console.log("promise1-3");
       })
 
       .then(function() {
         console.log("promise1-4");
       });
 
     console.log("after promise1");
   })
 
   .then(function() {
     new Promise(resolve => {
       console.log("promise2");
 
       resolve();
     })
 
       .then(function() {
         console.log("promise2-1");
       })
 
       .then(function() {
         console.log("promise2-2");
       })
 
       .then(function() {
         console.log("promise2-3");
       })
 
       .then(function() {
         console.log("promise2-4");
       });
 
     console.log("after promise2");
   })
 
   .then(function() {
     new Promise(resolve => {
       console.log("promise3");
 
       resolve();
     })
 
       .then(function() {
         console.log("promise3-1");
       })
 
       .then(function() {
         console.log("promise3-2");
       })
 
       .then(function() {
         console.log("promise3-3");
       })
 
       .then(function() {
         console.log("promise3-4");
       });
 
     console.log("after promise3");
   });

执行过程

输出 入microTask queue microTask queue
Promise Promise1 Promise1
promise1 promise1-1 promise1-1
after promise1 promise2 promise1-1,promise2
promise1-1 promise1-2 promise2,promise1-2
promise2 promise2-1 promise1-2,promise2-1
after promise2 promise3 promise1-2,promise2-1,promise3
promise1-2 promise1-3 promise2-1,promise3,promise1-3
promise2-1 promise2-2 promise3,promise1-3,promise2-2
promise3 promise3-1 promise1-3,promise2-2,promise3-1
after promise3 promise1-3,promise2-2,promise3-1
promise1-3 promise1-4 promise2-2,promise3-1,promise1-4
promise2-2 promise2-3 promise3-1,promise1-4,promise2-3
promise3-1 promise3-2 promise1-4,promise2-3,promise3-2
promise1-4 promise2-3,promise3-2
promise2-3 promise2-4 promise3-2,promise2-4
promise3-2 promise3-3 promise2-4,promise3-3
promise2-4 promise3-3
promise3-3 promise3-4 promise3-4
promise3-4

思考

如果需要按顺序输出,需要如何修改代码呢?

Promise
promise1
promise1-1
promise1-2
promise1-3
promise1-4
promise2
promise2-1
promise2-2
promise2-3
promise2-4
promise3
after promise3
promise3-1
promise3-2
promise3-3
promise3-4

答案在Promise链式嵌套执行顺序(带详细执行过程)的评论中; 如果有错误的地方,欢迎指出讨论!!