Promise的学习笔记3——async与await、宏队列与微队列

async与await

async函数的返回值为promise对象
await右侧的表达式一般为promise对象，但也可以是其它的值
注意：await必须写在async函数中，但async函数中可以没有await

        function test1() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve(1)
                    // reject(1) // 3.
                }, 1000);
            })
        }

        // 2.
        // function test2() {
        //     return 2
        // }

        async function test3() {
            try {
                const value = await test1() // 1.
                // 1. 表达式是promise对象，await返回的是promise成功的值
                // 2. const value = await test2() 
                // 2. 表达式是函数/值,函数的返回值/该值作为await的返回值
                console.log('value', value)
            } catch (error) {
                console.log('reason:', error);
                // 3.await的promise失败，需要通过try...catch来捕获处理
            }
        }

        test3()

由上述代码可知，await右侧的表达式可能是promise对象，也可能是其他值。同时await的promise是失败时要try…catch。

宏队列与微队列

宏队列：定时器回调、dom事件回调、ajax回调

微队列：promise回调、mutation回调

注意：在队列中，微队列优先级高于宏队列。先执行完全部微任务，再执行宏任务。

一些面试题

面试题1

        setTimeout(() => {
            console.log(1)
        })
        Promise.resolve().then(() => {
            console.log(2)
        })
        Promise.resolve().then(() => {
            console.log(3)
        })
        console.log(4)
         /*
            同步执行：4
            微任务：2 3
            宏任务：1
         */
        //4 2 3 1

面试题2

        setTimeout(() => {
            console.log(1)
        })
        new Promise((resolve) => {
            console.log(2)
            resolve()
        }).then(() => {
            console.log(3)
        }).then(() => {
            console.log(4)
        })
        console.log(5)
        /*
            同步执行：2 5
            微任务：3 4
            宏任务：1
         */
        //2 5 3 4 1

面试题3

        const first = () => (new Promise((resolve, reject) => {
            console.log(1)
            let p = new Promise((resolve, reject) => {
                console.log(2)
                setTimeout(() => {
                    console.log(3)
                    resolve(4)
                })
                resolve(5)
            })
            resolve(6)
            p.then((arg) => {
                console.log(arg)
            })
        }))
        first().then((arg) => {
            console.log(arg)
        })
        console.log(7)
        /*
            同步执行:1 2 7
            微任务：5 6
            宏任务：3
         */
        //1 2 7 5 6 3

面试题4

        setTimeout(() => {
            console.log(1)
        })
        new Promise((resolve, reject) => {
            console.log(2)
            resolve()
        }).then(() => {
            console.log(3)
            new Promise((resolve, reject) => {
                console.log(4)
                resolve()
            }).then(() => {
                console.log(5)
            }).then(() => {
                console.log(6)
            })
        }).then(() => {
            console.log(7)
        })
        new Promise((resolve, reject) => {
            console.log(8)
            resolve()
        }).then(() => {
            console.log(9)
        })

        /*
            同步执行:2 8
            微任务：3 [同：4] 9 5 7 6
            宏任务：1
         */
        //2 8 3 4 9 5 7 6 1