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
    react(十五)-- promise(面试)
  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
    react(十五)-- promise(面试)
  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
    react(十五)-- promise(面试)
上一篇:Promise


下一篇:ES6-promise理解