JS 异步

在ES3时代， JavaScript本身没有异步执行代码的能力，所以就是宿主环境（浏览器）传递给它一段代码，它就顺序的执行这段代码。宿主环境顺序的发送一系列任务，JavaScript引擎就顺序的执行这些任务。
但是，在ES5之后，JavaScript引入了Promise,这样，不需要浏览器安排，JavaScript引擎本身也可以发起任务了。
所以这里就有了两种任务：

1. 浏览器发起的任务，我们称之为宏观任务。

2. 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");