话不多说,先上代码,看看你有几斤几两:
//请写出输出内容
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(function(resolve) {
console.log('promise1');
resolve();
}).then(function() {
console.log('promise2');
});
console.log('script end');
/*
script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout
*/
然后我们跟随js引擎一起来看看到底怎么处理的:
一些你需要事先知道的规则:
js是单线程语言,对于异步操作只能先把它放在一边,按照某种规则按先后顺序放进一个容器(其实就是存入宏观任务和微观任务队列中),先处理眼前立即执行的任务(也就是同步任务),同步任务都结束后再回头处理之前放入队列中的异步操作。就像一个人一次只能接听一个电话,接听电话中突然又来另一个电话只能先把新来的电话挂起,等手头电话通话结束后再按来电时间挨个回话(总得有个先来后到吧兄弟)。
按照规定,能发起宏观任务的方法有:script(整体代码)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境);
微观任务:Promise.then、MutaionObserver、process.nextTick(Node.js 环境),async/await实际上是promise+generator的语法糖,也就是promise,也就是微观任务;
什么是宏观任务、微观任务?你可以百度一下它的定义,然而我肯定你看完会很头大,其实你只需要知道:
同步任务结束后,先处理微观任务后处理宏观任务;
上面代码说明:
先输出'script start'
,这句没争议;
接下来碰到setTimeout()
,属于异步操作,遵守规定它属于宏观任务,所以把它放入宏观任务队列,让出线程,继续执行其他同步代码;
然后开始async1()
,async方法的处理方式:碰到await后先立即执行await后面的代码,也就是async2()
,async2()
打印出'async2'
,然后让出线程,把console.log('async1 end')
这句话放入微观队列,继续执行其他同步代码;
继续,碰到了promise
,new Promise
内的代码会立即执行(为啥?看es6语法呗),打印出'promise1'
,然后把then()
里面的语句,也就是console.log('promise2')
放入微观队列,让出线程继续执行同步代码;
最后执行console.log('script end')
,打印出'script end'
;
到此为止所有同步代码执行结束,现在来看看异步操作都留下了哪些微观任务及宏观任务
宏观任务:只有setTimeout()
留下的一句话:console.log('setTimeout')
微观任务:按加入顺序排列有:console.log('async1 end')
,console.log('promise2')
继续按照规定办事,先处理微观任务后处理宏观任务,也就是按顺序打印'async1 end'
、'promise2'
、'setTimeout'