一、JavaScript的执行

一、JavaScript的执行

​ 当拿到一段 JavaScript 代码时，浏览器或者 Node 环境首先要做的就是；传递给 JavaScript 引擎，并且要求它去执行。然而，执行 JavaScript 并非一锤子买卖，宿主环境当遇到一些事件时，会继续把一段代码传递给 JavaScript 引擎去执行，此外，我们可能还会提供 API 给 JavaScript 引擎，比如 setTimeout 这样的 API，它会允许 JavaScript 在特定的时机执行。所以，我们首先应该形成一个感性的认知：一个 JavaScript 引擎会常驻于内存中，它等待着我们（宿主）把 JavaScript 代码或者函数传递给它执行。

​ 在 ES3 和更早的版本中，JavaScript 本身还没有异步执行代码的能力，这也就意味着，宿主环境传递给 JavaScript 引擎一段代码，引擎就把代码直接顺次执行了，这个任务也就是宿主发起的任务。

​ 但是，在 ES5 之后，JavaScript 引入了 Promise，这样，不需要浏览器的安排，JavaScript 引擎本身也可以发起任务了。

​ JavaScript 语言，我们把宿主发起的任务称为宏观任务，把 JavaScript 引擎发起的任务称为微观任务。

二、宏观任务与微观任务

​ JavaScript引擎等待宿主环境分配宏观任务，在操作系统中，通常等待的行为都是一个事件循环，所以在Node术语中，也会把这个部分称为事件循环。

宏观任务的队列就相当于事件循环

​ 在宏观任务中，JavaScript的promise还会产生异步代码，JavaScript必须保证这些异步代码在一个宏观任务中完成，因此每个宏观任务中又包含一个微观任务队列。

MacroTask

​ microTask microTask microTask

MacroTask

​ microTask microTask microTask

MacroTask

​ 有了宏观任务和微观任务机制，我们就可以实现 JavaScript 引擎级和宿主级的任务了，例如：Promise 永远在队列尾部添加微观任务。setTimeout 等宿主 API，则会添加宏观任务。

三、Promise

​ Promise是JavaScript语言提供的一种标准化的异步管理方式。promise总体思想是，需要进行IO、等待或者其它异步操作的函数，不返回真实结果，而返回一个“承诺”，函数的调用方可以在合适的时机，选择等待这个承诺兑现（promise的then方法回调）

function sleep (duration) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, duration)
  })
}
sleep(1000).then(() => console.log('finished'))

sleep函数的作用：等候传入参数指定的时长。

Promise的then回调是一个异步的执行过程。示例代码：

var test = new Promise(function(resolve,reject){
  console.log('a')
  resolve()
})
test.then(() => console.log('c'))
console.log('b')

打印顺序：a > b > c

​ 在进入console.log('b')之前，毫无疑问test已经得到了resolve，但是Promise的resolve始终是异步操作，所以c无法出现在b之前。

当setTimeout和Promise混用，设置两段互不相干的异步操作：通过setTimeout执行console.log('d')，通过Promise执行console.log('c')

var test = new Promise(function(resolve,reject){
  console.log('a')
  resolve()
})
setTimeout(() => console.log('d'),0)
test.then(() => console.log('c'))
console.log('b')

我们发现，不论代码顺序如何，d必定发生在c之后，因为Promise产生的是JavaScript引擎内部的微任务，而setTimeout是浏览器API，它产生宏任务。

理解微任务始终先于宏任务，示例：

		// 执行一个耗时1秒的Promise
    setTimeout(()=>console.log("d"), 0)
    var r = new Promise(function(resolve, reject){
        resolve()
    });
    r.then(() => { 
        var begin = Date.now();
        while(Date.now() - begin < 1000);
        console.log("c1") 
        new Promise(function(resolve, reject){
            resolve()
        }).then(() => console.log("c2"))
    });

执行顺序：c1 > c2 > d 。 即使耗时1秒的c1执行完毕，再enque的c2，仍然先于d执行，这可以很好的解释了微任务优先的原理。

异步执行的顺序：

1、分析有多少个宏任务

2、在每个宏任务中，分析有多少个微任务

3、根据调用次序，确定宏任务中的微任务执行次序

4、根据宏任务的触发规则和调用次序，确定宏任务的执行次序

5、确定整个顺序

复杂的例子：

    function sleep(duration) {
        return new Promise(function(resolve, reject) {
            console.log("b");
            setTimeout(resolve,duration);
        })
    }
    console.log("a");
    sleep(5000).then(()=>console.log("c"));

执行顺序：a > b > c 。setTimeout把整个代码分割成了2个宏观任务，，不论是5秒还是0秒，都是一样。

第一个宏观任务中，包含了先后同步执行的console.log('a')和console.log('b')

setTimeout后，第二个宏观任务执行调用了resolve，然后then中的代码异步得到执行，所以调用了console.log('c'),最终输出的顺序为： a b c 。

​ Promise 是 JavaScript 中的一个定义，但是实际编写代码时，我们可以发现，它似乎并不比回调的方式书写更简单，但是从 ES6 开始，我们有了 async/await，这个语法改进跟 Promise 配合，能够有效地改善代码结构。

四、async/await

​ async/await是ES2016新加入的特性，它提供了用for、if等结构来编写异步的方式。

它的运行时基础是Promise。

​ async函数必定返回Promise，我们把所有返回Promise的函数都可以认为是异步函数。

async函数是一种特殊语法，特征是在function关键字之前加上一个async关键字，这样就定义了一个async函数，我们可以在其中使用await来等待一个Promise。

function sleep(duration) {
    return new Promise(function(resolve, reject) {
        setTimeout(resolve,duration);
    })
}
async function foo(){
    console.log("a")
    await sleep(2000)
    console.log("b")
}
foo()

​ async函数强大之处在于，它是可以嵌套的。

function sleep(duration) {
    return new Promise(function(resolve, reject) {
        setTimeout(resolve,duration);
    })
}
async function foo(name){
    await sleep(2000)
    console.log(name)
}
async function foo2(){
    await foo("a");
    await foo("b");
}