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