记录宏任务和微任务测试和总结

先看下只有async配合promise的

const myPromise = new Promise((resolve, reject) => {
    console.log(1);
    try {
        console.log(2);
        const arr = Array.from(new Array(763).keys())
        let otherArr = []
        Array.from(new Array(Math.ceil(arr.length / 100)).keys()).forEach((item, index) => {
            otherArr = otherArr.concat(arr.slice(index * 100, (index + 1) * 100))
        })
        console.log(3);
        if (otherArr.length === arr.length) {
            resolve(otherArr)
            console.log(4);
        }
    } catch (error) {
        reject(error)
    }
}).then(res=>{
    console.log(5);
    return 555
}).then(res=>{
    console.log(6);
    return 666
}).finally(res=>{
    console.log(7);
    return 777
})

const testAsync = async()=>{
    console.log(8);
    const arr = await myPromise
    console.log(9);
    console.log(arr);//666
}
testAsync() //1 2 3 4 8 5 6 7 9 666

可知:当promise写了then/catch时，await这个promise的返回值为最后一次then/catch的返回值

再看async和promise混合使用的

const myPromise = new Promise((resolve, reject) => {
    console.log(1);
    try {
        console.log(2);
        const arr = Array.from(new Array(763).keys())
        let otherArr = []
        Array.from(new Array(Math.ceil(arr.length / 100)).keys()).forEach((item, index) => {
            otherArr = otherArr.concat(arr.slice(index * 100, (index + 1) * 100))
        })
        console.log(3);
        if (otherArr.length === arr.length) {
            resolve(otherArr)
            console.log(4);
        }
    } catch (error) {
        reject(error)
    }
}).then(res=>{
    console.log(5);
    return 555
}).then(res=>{
    console.log(6);
    return 666
}).then(res=>{
    console.log(7);
    return 777
}).finally(res=>{
    console.log(8);
    return 888
})

new Promise((resolve)=>{
    console.log(9);
    resolve()
}).then(res=>{
    console.log(10);
}).then(res=>{
    console.log(11);
}).finally(res=>{
    console.log(12);
})


const testAsync = async()=>{
    console.log(13);
    const arr = await myPromise
    console.log(14);
    console.log(arr);//777
}
testAsync() //1 2 3 4 9 13 5 10 6 11 7 12 8 14 777

可以看出:await promise 下面行的代码可以看作当前promise所有then/catch/finally执行完之后的下一层

测试典型的宏任务和微任务组合

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

setTimeout(function() {
    console.log(3);
    setTimeout(()=>{
        console.log(4);
    },0)
    new Promise(function(resolve) {
        console.log(5);
        resolve();
    }).then(function() {
        console.log(6)
    })
})

const myPromise = new Promise((resolve, reject) => {
    console.log(7);
    try {
        console.log(8);
        const arr = Array.from(new Array(763).keys())
        let otherArr = []
        Array.from(new Array(Math.ceil(arr.length / 100)).keys()).forEach((item, index) => {
            otherArr = otherArr.concat(arr.slice(index * 100, (index + 1) * 100))
        })
        console.log(9);
        if (otherArr.length === arr.length) {
            resolve(otherArr)
            console.log(10);
        }
    } catch (error) {
        reject(error)
    }
}).then(res=>{
    console.log(11);
    return 666
})

const testAsync = async()=>{
    console.log(12);
    const arr = await myPromise
    console.log(13);
    console.log(arr);
}
testAsync() 


new Promise((resolve)=>{
    console.log(14);
    resolve()
}).then(res=>{
    console.log(15);
    testAsync() 
}).then(res=>{
    console.log(16);
    setTimeout(()=>{
        console.log(17);
    },0)
})

setTimeout(function() {
    console.log(18);
    new Promise(function(resolve) {
        console.log(19);
        resolve();
        testAsync() 
    }).then(function() {
        console.log(20)
    })
    setTimeout(()=>{
        console.log(21);
    },0)
})



new Promise((resolve)=>{
    console.log(22);
    resolve()
}).then(res=>{
    console.log(23);
}).then(res=>{
    console.log(24);
})

setTimeout(function() {
    console.log(25);
    new Promise(function(resolve) {
        console.log(26);
        resolve();
    }).then(function() {
        console.log(27)
        setTimeout(()=>{
            console.log(28);
            testAsync() 
        },0)
    })
});

输出: 1 2 7 8 9 10 12 14 22 11 15 12 23 13 666 13 666
16 24 3 5 6 18 19 12 13 666 20 25 26 27 17 4 21 28 12 13 666

总结:
1.先执行完所有同步任务
2.执行同一层微任务
3.执行后面层微任务
4.微任务执行完再执行宏任务，宏任务则需要里面的所有微任务执行完才执行下一个宏任务
5.宏任务的执行顺序是按推入队列的顺序来执行的
6.await返回最后一个then/catch中返回的值，若没有then或者catch，则返回resolve或者reject中传的值
7.await promise 下面行的代码可以看作当前promise所有then/catch/finally执行完之后的下一层

最后编辑于：2020.10.20 22:55:30