react十五-- promise面试

  1. 以下代码,打印结果为:
setTimeout(() => {
    console.log(1);
}, 0)

Promise.resolve().then(()=>{
    console.log(2);
})

Promise.resolve().then(()=>{
    console.log(3);
})

console.log(4);

分析:

  • 01 先同步后异步
    setTimeout 与 Promise里面的回调函数都是异步的
    console.log(4);是同步的
  • 02 异步又分为 宏任务微任务
    执行异步的时候,先执行宏任务,后执行微任务
    宏任务队列:【1】
    微任务队列:【2,3】
    所以结果为:4,2,3,1

    在这里插入图片描述

  1. 以下代码,打印结果为:
setTimeout(() => {
    console.log(1);
}, 0)
new Promise((resolve) => {
    console.log(2);
    resolve();
})
    .then(()=>{
        console.log(3);
    })
    .then(()=>{
        console.log(4);
    })

console.log(5);

分析:

  • 01 以下代码是一个函数,放在Promise中的函数,会立即执行,是同步函数
    (resolve) => {
            console.log(2);
            resolve();
    }
  • 02 按照先同步后异步,异步中 先微任务再宏任务的顺序,结果为:
    2,5,3,4,1

    在这里插入图片描述

  1. 以下代码,打印结果为:
const fn = () => 
    new Promise((resolve, reject) => {
        console.log(1);

        let p = new Promise((resolve,reject) => {
            console.log(2);
            setTimeout(() => {
                console.log(3);
                resolve(4);
            },0);

            resolve(5);
        });
        resolve(6);
        p.then((arg) =>{
            console.log(arg);
        });
    });

    fn().then((arg) => {
        console.log(arg);
    });
    console.log(7);

分析:

  • 执行完同步 1,2,7之后,执行resolve(5),把5传给resolve(6)下面的
    p.then((arg) =>{
             console.log(arg);
    });
    将 5 放到微任务队列中
    如上,执行resolve(6),将6传给fn().then(()=>{})里面的参数,
    将 5 放到微任务队列中
  • 最后执行宏任务setTimeout
    结果为:1,2,7,5,6,3

    在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐