JavaScript 异步原理与执行顺序 - 《JavaScript》

promise、async、await、settimeout异步原理与执行顺序

    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
VM3037:2 async1 start
VM3037:7 async2 // ### 见解析
VM3037:15 promise1
VM3037:20 script end
VM3037:4 async1 end // ### 见解析
VM3037:18 promise2
VM3037:11 settimeout

await是一个让出线程的标志。await后面的函数会先执行一遍，然后就会跳出整个async函数来执行后面js栈的代码，等本轮事件循环执行完了之后又会跳回到async函数中等待await后面表达式的返回值，如果返回值为非promise则继续执行async函数后面的代码，否则将返回的promise放入promise队列。

附：多嵌套一个async3

    async function async1() {
      console.log("async1 start");
      await async2();
      console.log("async1 end");
    }
    async function async2() {
      await async3();
      console.log("async2");
    }
    async function async3() {
      console.log("async3");
    }
    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
VM38:2 async1 start
VM38:11 async3
VM38:19 promise1
VM38:24 script end
VM38:8 async2
VM38:22 promise2
VM38:4 async1 end
VM38:15 settimeout