异步代码微任务宏任务案例

bingMIN / 2023-08-18 / 原文

案例一

案例01

process.nextTick(()=>{console.log("111");})

const promise = new Promise(resolve=>{
    console.log("222");
    resolve()
})

setTimeout(()=>{console.log("333");},100)

promise.then(()=>{console.log("444");})


/*
    执行结果 =>
     2 同步代码
     1 微任务老大
     4 微任务
     3 宏任务
 */

案例二

案例02

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

process.nextTick(()=>{
    console.log("222");
})

setTimeout(()=>{
    console.log("333");
},0)

console.log("444");

/*
    4 同步代码
    2 微任务老大
    1 微任务
    3 宏任务
 */

案例三

案例03

console.log("111");

setTimeout(()=>{
    console.log("222");
},0)

new Promise((resolve)=>{
    console.log("333");
    resolve()
})
.then(()=>{
    console.log("444");
})
.then(()=>{
    console.log("555");
})

console.log("666");

/*
    1 同步代码
    3 同步代码
    6 同步代码
    4 微任务
    5 微任务
    2 宏任务
 */

案例四

案例04

process.nextTick(()=>{
    console.log("111");
})

setTimeout(()=>{
    console.log("222");
},0)

const promise = Promise.resolve()
promise.then(()=>{
    console.log("333");
    process.nextTick(()=>{
        console.log("444");
    })
    setTimeout(()=>{
        console.log("555");
    },0)
})
.catch(()=>{
    console.log("666");
})


/*
    1 微任务老大
    3 微任务
    4 微任务中的微任务老大
    2 宏任务
    5 微任务中的宏任务
 */

案例五

案例05

process.nextTick(()=>{
    console.log("111");
})

setTimeout(()=>{
    console.log("222");
},0)

const promise = Promise.resolve()
promise.then(()=>{
    console.log("333");
    process.nextTick(()=>{
        console.log("444");
    })
    setTimeout(()=>{
        console.log("555");
    },0)
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            reject(111)
        },0)
    })
})
.catch(()=>{
    // console.log(res);
    console.log("666");
})


/*
    1 微任务老大
    3 微任务
    4 微任务中微任务老大
    2 宏任务
    5 微任务中的宏任务
    6 微任务中的宏任务
 */

案例六

案例06

const promise = new Promise((resolve,reject)=>{
    console.log(111);
    setTimeout(() => {
        console.log(222);
        resolve("success")
        console.log(333);
    }, 0);
    console.log(444);
})
promise.then((res)=>{
    console.log(555);
})
console.log(666);

/*
    1 同步代码
    4 同步代码
    6 同步代码
    2 宏任务中的同步代码
    3 宏任务中的同步代码
    5 宏任务中的微任务

 */