在ES3时代， JavaScript本身没有异步执行代码的能力，所以就是宿主环境（浏览器）传递给它一段代码，它就顺序的执行这段代码。宿主环境顺序的发送一系列任务，JavaScript引擎就顺序的执行这些任务。
但是，在ES5之后，JavaScript引入了Promise,这样，不需要浏览器安排，JavaScript引擎本身也可以发起任务了。
所以这里就有了两种任务：
- 浏览器发起的任务，我们称之为宏观任务。
-
JavaScript引擎发起的任务，我们称之为微观任务。
JavaScript引擎顺序的执行浏览器发过来的宏观任务。如果宏观任务中包含了Promise,那么promise就会异步的执行一些代码，这些异步执行的代码我们称之为微观任务；一个宏观任务可以包含多个微观任务，但是JavaScript必须保证所有的微观任务结束后宏观任务才能结束。
如下图所示，这两个MacroTask(宏观任务）会顺序执行，只有第一个宏观任务的所有微观任务全部执行完成后，第二个宏观任务才会开始执行。
image.png
我们来看下面这段代码，你可以猜测一下它的输出结果
var r = new Promise(function(resolve, reject){
//sleep 1s
var begin = Date.now();
while(Date.now() - begin < 1000);
console.log("a");
resolve()
});
setTimeout(() => console.log("d"), 0);
r.then(() => console.log("c"));
console.log("b");
它的输出结果是a,b,c,d
是不是感觉很奇怪？下面我们来分析一下：
按照我们之前学的内容，宏观任务是顺序执行的；这里将整段代码交给JavaScript引擎是第一个宏观任务；setTimeout是对浏览器API的一个调用时第二个宏观任务。
所以setTimeout会在第一个宏观任务执行完之后才会被执行。
第一个宏观任务中new了一个Promise，即有一个微观任务，我们知道只有当宏观任务的所有微观任务都结束之后，下一个宏观任务才会被执行。
我们发现通过Promise写的函数可读性依然很差。所有ES6中又引入了async/await,来辅助我们写异步代码
function sleep(duration) {
return new Promise(function (resolve, reject) {
setTimeout(resolve, duration);
})
}
async function foo(name) {
console.log("a");
await sleep(2000);
console.log(name);
}
async function foo2() {
await foo("c");
await foo("b");
}
foo2();
console.log("c");
