js是单线程的,也就代表js只能一件事情一件事情执行,那如果一件事情执行时间太久,后面要执行的就需要等待,需要等前面的事情执行完成,后面的才会执行。
所以为了解决这个问题,js委托宿主环境(浏览器)帮忙执行耗时的任务,执行完成后,在通知js去执行回调函数,而宿主环境帮我们执行的这些耗时任务也就是异步任务
js本身是无法发起异步的,但是es5之后提出了Promise可以进行异步操作
概念:
宿主环境提供的叫宏任务,由语言标准提供的叫微任务
相信接下来的案例一定对你有帮助
案例1:
console.log(1)
setTimeout(function(){
console.log(2)
}, 0)
new Promise(function(resolve){
console.log(3)
resolve()
}).then(function(){
console.log(4)
})
console.log(5)
答案:1、3、5、4、2
解析:
主线程判断是同步代码还是异步代码
console.log(1) // 同步任务
setTimeout(function(){
console.log(2) // 异步任务:宏任务
}, 0)
new Promise(function(resolve){
console.log(3) // 同步任务
resolve()
}).then(function(){
console.log(4) // 异步任务:微任务
})
console.log(5) // 同步任务
执行同步任务
console.log(1) // 同步任务
console.log(3) // 同步任务
console.log(5) // 同步任务
执行异步任务:微任务
console.log(4) // 异步任务:微任务
执行异步任务:宏任务
console.log(2) // 异步任务:宏任务
案例2:
注意点:await的执行顺序为从右到左,会阻塞后面的代码执行,但并不是直接阻塞await的表达式
await下面(下面不是右面)的代码可以理解为promise.then(function(){ 回调执行的 })
async function async1() {
console.log('async1 start')
await async2()
// await后面的代码可以理解为promise.then(function(){ 回调执行的 })
console.log('async1 end')
}
async function async2() {
console.log('async2')
}
console.log('script start')
setTimeout(function() {
console.log('setTimeout')
}, 0)
async1()
console.log('script end')
答案:script start、async1 start、async2、script end、async1 end、setTimeout
解析:
主线程判断同步异步
async function async1() {
console.log('async1 start')
await async2() // 同步任务
// await后面的代码可以理解为promise.then(function(){ 回调执行的 })
console.log('async1 end') // 异步任务:微任务
}
async function async2() {
console.log('async2')
}
console.log('script start') // 同步任务
setTimeout(function() {
console.log('setTimeout') // 异步任务:宏任务
}, 0)
async1() // 同步任务
console.log('script end') // 同步任务
执行同步任务
console.log('script start')
console.log('async1 start')
console.log('async2')
console.log('script end')
执行异步任务:微任务
console.log('async1 end')
console.log('setTimeout')
案例3:
console.log(1)
setTimeout(function(){
console.log(2)
}, 2000)
new Promise(function(resolve){
console.log(3)
resolve()
}).then(function(){
console.log(4)
})
setTimeout(function(){
console.log(5)
new Promise(function(resolve){
console.log(6)
resolve()
}).then(function(){
console.log(7)
})
}, 3000)
setTimeout(function(){
console.log(8)
new Promise(function(resolve){
console.log(9)
resolve()
}).then(function(){
console.log(10)
})
}, 1000)
相信看到这里你一定懂了 不需要解析了吧
答案:1、3、4、8、9、10、2、5、6、7