如何理解async 和awiat的运行逻辑

前端小知识

理解async 和awiat的运行逻辑

	const foo = async ()=>{
	
            console.log(1);

            const a = await 100;

            console.log(a);

            console.log(2);
	
	}
	
	console.log(0);
	
	foo()
	
	console.log(3);

• 执行结果：

0

1

3

100

2

解释

1. 在浏览器中的事件循环系统，会有两种任务：微任务，宏任务；

   1. 微任务：promise
   2. 宏任务：settimeout，setInterval
   3. 执行逻辑：在整个任务队列中存放的是一个又一个宏任务，每一个宏任务中有又存放着微任务列表。在执行完宏任务后，会执行该宏任务里的微任务；如果在微任务中有产生了新的微任务，会接着被放入这个微任务列表里面

2. 创建微任务之后，会继续执行宏任务里面的语句，也就是console.log(3)；

3. 当宏任务之行完成之后，便会去执行微任务列表里面的微任务；

4. 只有在事件循环去执行微任务的时候，才会去执行.then(()=>{})里面的逻辑

5. await其实会生成一个promise函数，当运行到 await 100的时候，会生成类似于Promise.resolve(100)的逻辑，并且把await后面的语句当成该promise状态变更之后的回调函数.then()；