本题目主要涉及宏任务微任务async,await的理解:
async function async1() {
console.log('async1 start')// 1
await async2()//2
console.log('async1 end')//3
}
async function async2() {
console.log('async2')// 4
}
console.log('script start')//5
setTimeout(function () {
console.log('settimeout')//6
})
async1()//7
new Promise(function (resolve) {
console.log('promise1')//8
resolve()//9
}).then(function () {
console.log('promise2')// 10
})
console.log('script end')// 11
答案:
如果答案和你的想法有出入,希望下面的解读能帮助你解答疑惑~
解读:
1、JS先执行同步代码,5执行,输出=>script start
2、遇到setTimeout异步任务,放入任务队列等待执行,setTimeout是宏任务,如果队列有微任务,那微任务先执行(微任务>dom渲染>宏任务)
3、代码句7执行,同步执行1,输出=>async1 start
async function async1() {
console.log('async1 start')// 1
await async2()//2
console.log('async1 end')//3
}
await async2()执行,输出=>async2
4、await等待结果出来之后,代码才会继续往下执行,await语句之后的代码和Promise.then效果类似:async函数里,在await之前的代码同步执行,就像new Promise里传入的同步代码,await之后的代码,就像Promise.then的回调函数
代码句2执行后,代码句3放入队列,类似Promie任务,放入微任务
5、进入Promise代码,执行8,输出=>promise1
new Promise(function (resolve) {
console.log('promise1')//8
resolve()//9
}).then(function () {
console.log('promise2')// 10
})
console.log('script end')// 11
6、执行resolve,把then回调放入微任务,此时微任务有3>10
等待队列的代码:
setTimeout(function () {
console.log('settimeout')//6
})
console.log('async1 end')//3
console.log('promise2')// 10
7、执行同步代码11,输出=>script end
8、主线程内的任务执行完毕,去任务队列读取对应的任务,微任务先执行,先进先出,3先执行,之后是10,最后执行settiimeout ,顺序输出=> async1 end、promise2、settimeout
如果有疑问或发现什么不足之处,欢迎留言~
还有一期Promise.then执行的问题,写完会贴上来,大家也可以去主页翻翻
感谢阅读
祝更好,
拜拜!