async await中代码的执行顺序

553 阅读1分钟

在async函数中,执行到await时,await会阻塞它所在行下面的代码,而会先等待紧跟在await后面代码执行的结果,通常是获取的数据,并用获取的数据来服务之前await阻塞的代码,形如:

async function getList(list){
   const res = await getData();
   list = res.data;
}

但是对于await后方代码的处理结果不同,await也会做出不同的反应:

1.等到的是一个promise对象:此时await会阻塞其下面的代码,先执行async函数外部的同步代码,直到promise对象fulfilled,把resolve中的参数作为await等待的结果。

2.等到的是非promise对象:此时await同样会阻塞其下面的代码,先执行async函数外部的同步代码,同步代码执行完后再回到async函数的内部,将这个非promise对象作为await的结果。

下面有一段惯用的同步异步代码运行顺序的例子,可以仔细研究一下:

async function async1(){
	console.log('async1 start')
	await async2()
	console.log('async1 end')
}
async function async2(){
	console.log('async2')
}
console.log('script start')
setTimeout(function(){
	console.log('setTimeout')
}, 0)
async1()
new Promise(resolve => {
	console.log('promise0')
	resolve()
})
.then(()=>{
	console.log('promise1')
})
.then(()=>{
	console.log('promise2')
})
console.log('script end')

script start => async1 start => async2 => promise0 => script end 
=> promise1 => promise2 => async1 end => setTimeout