面试题——Promise.then的执行顺序

87 阅读2分钟

本题主要涉及Promise.then的执行顺序,上一期关于异步await的题目解答链接在这

看看本期题目:

  new Promise(resolve => {
                 resolve();
             })
             .then(() => { //1
                 new Promise(resolve => {
                         resolve();
                     })
                     .then(() => { //2
                         console.log(111);
                     })
                     .then(() => { //3
                         console.log(222);
                     });
             })
             .then(() => { //4
                 new Promise((resolve => {
                         resolve()
                     }))
                     .then(() => { //5
                         new Promise((resolve) => {
                                 resolve()
                             })
                             .then(() => { //6
                                 console.log(444)
                             })
                             .then(() => { //7
                                 console.log(666)
                             })
                     })
                     .then(() => { //8
                         console.log(555);
                     })
             })
             .then(() => { //9
                 console.log(333);
             })
思考:

我们知道,Promise里的同步代码立即执行,then的异步代码放入队列,等待执行,那一个Promise后面不只有一个then,那先执行哪个?后执行哪个呢?

首先,我们要理解

在执行栈中,代码从上往下执行,遇到promise立即执行里面的代码,resolve表示promise的状态,传递到then推进微任务队列,链式调用的then回调执行完毕后,会再将该条链的下一个then推入队列

题目代码执行:
1、

进入Promise执行resolve(),then1进队列,执行栈没有其他任务,队列也是空的,1直接出队列,主线程执行1

2、

1执行resolve,把then2推进任务队列,此时相当于1回调完成,【队列:then2】

 new Promise(resolve => {
                 resolve();
             })
             .then(() => { //1
                 new Promise(resolve => {
                         resolve();
                     })
                     .then(() => { //2
                         console.log(111);
                     })
                     .then(() => { //3
                         console.log(222);
                     });
             })
3、

then1链后是then4,1回调完成,4进入队列,【队列:then2,then4】

主线程从队列取出then2执行,输出=>111

4、

2执行完,3进入队列,【队列:then4,then3】

5、

取出4执行

  .then(() => { //4
                 new Promise((resolve => {
                         resolve()
                     }))
                     .then(() => { //5
                         new Promise((resolve) => {
                                 resolve()
                             })
                            。。。
                     })
                     .then(() => { //8
                         console.log(555);
                     })
   })
  .then(() => { //9
       console.log(333);
  })

执行到5把5放入队列,4回调完毕,把其后的9放入队列,【队列:then3,then5,then9】

6、

取出then3执行,输出=>222

  .then(() => { //3
     console.log(222);
 });

取出then5执行,把6放入队列,5执行完毕,其后的8放入队列【队列:then9,then6,then8】

   .then(() => { //5
                         new Promise((resolve) => {
                                 resolve()
                             })
                             .then(() => { //6
                                 console.log(444)
                             })
                             .then(() => { //7
                                 console.log(666)
                             })
  })
 .then(() => { //8
        console.log(555);
 })
7、

取出9执行,输出=>333

  .then(() => { //9
    console.log(333);
 })

取出6执行,输出=>444

6执行完,7放入队列 【队列:then8,then7】

8、

执行8,执行7 =>555,666

所以答案就是:111,222,333,444,555,666

如果有疑问或发现什么不足之处,欢迎留言~

感谢阅读

祝更好,

拜拜!