前端每日一道面试题（4）

最新推荐文章于 2025-05-20 08:12:16 发布

小宇宙a

最新推荐文章于 2025-05-20 08:12:16 发布

阅读量134

点赞数

分类专栏：每日面试题文章标签： javascript 面试前端

本文链接：https://blog.youkuaiyun.com/qq_58949290/article/details/120017381

版权

每日面试题专栏收录该内容

6 篇文章

订阅专栏

本文详细解析了Promise的执行流程，通过一个具体的代码示例展示了宏任务与微任务的执行顺序，包括同步代码、Promise resolve产生的微任务以及多层嵌套Promise的处理。最后给出了详细的执行结果及每轮任务的划分，帮助读者深入理解JavaScript异步执行机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

hello 还是熟悉的味道。面试，你准备好了吗？

接下来看题说出打印结果并解释说明

new Promise(function(resolve,reject){
    console.log("A");
    resolve()
}).then(function(){
    new Promise(function(resolve,reject){
        console.log("B")
        resolve();
    })
    .then(function(){
        console.log("C")
    })
    .then(function(){
        new Promise(function(resolve,reject){
            console.log("D");
            resolve();
        })
        .then(function(){
            console.log("E")
        })
        .then(function(){
            console.log("F");
        })
        console.log("G");
    });
    console.log('H')
})
.then(function(){
    console.log("I")
})

new Promise(function(resolve,reject){
    console.log("J");
    resolve();
    
})
.then(function(){
    console.log("k")
})
.then(function(){
    console.log('L')
})

解释：

注：下文中的轮次主要是为了方便大家理解

首先，我们来看最外层的两个new Promise，里面的同步语句会先执行，所以最先打印出来的是A和J。

因为每个Promise都会产生一个微任务，所以最外层的两个Promise的第一个then会进入到第一轮的微任务当中，下面我们来看单独看这两个then。

第一个Promise的第一个then里面又new了一个新的Promise，这个新的Promise产生一个微任务，本轮的微任务已经在执行当中了，所以这个微任务会被派到下一个微任务队列的第一位，还是先执行里面的同步语句，打印B和H，之后运行第二个Promise的第一个then，打印K。

第一轮微任务执行完毕，开始第二轮微任务，先执行第三个Promise的第一个then，打印C，继续执行第一个Promise的第二个then，打印I，最后执行第二个Promise的第二个then，打印L。

第三轮微任务开始，执行第三个Promise的第二个then。这个then里面又new了一个新的Promise，同理，新的Promise（第四个）产生的微任务放入到下一轮的第一个执行，此时执行同步语句，打印D和G。

第四轮微任务开始，执行第四个Promise的第一个then，打印E。

第五轮微任务开始，执行第四个Promise的第二个then，打印F。

所以，最后结果：

A J B H K C I L D G E F

为了更直观的查看，把执行后的代码在发一遍

AJ  //第一轮的宏任务执行结果
BH  //第一轮 微任务里面的宏任务
K  //第一轮 微任务 执行的结果
CIL  //第二轮微任务 执行结果
DG   //第三轮微任务
E   //第四轮微任务
F  //第五轮微任务




new Promise(function(resolve,reject){
    console.log("A"); //1
    resolve()
}).then(function(){
    new Promise(function(resolve,reject){
        console.log("B")  //3
        resolve();
    })
    .then(function(){
        console.log("C")  //6
    })
    .then(function(){
        new Promise(function(resolve,reject){
            console.log("D"); //9
            resolve();
        })
        .then(function(){
            console.log("E") //11
        })
        .then(function(){
            console.log("F");  //12
        })
        console.log("G");  //10
    });
    console.log('H')  //4
})
.then(function(){
    console.log("I")  //7
})

new Promise(function(resolve,reject){
    console.log("J");  //2
    resolve();
    
})
.then(function(){
    console.log("k") //5
})
.then(function(){
    console.log('L')  //8
})