搞懂一道async await, promise， setTimeout執行順序的前端面試題

先指明這道題是面試題的改版，原題能夠看：promise、async和await之執行順序的那點事
這道題也不是我改的，出處見：async/await 執行順序詳解

這兩篇文章寫的很是好，我仔細琢磨了一下，感受受益不淺，決定記錄一下本身的理解。
再也不廢話，下面見題：

async function testSometing() {
    console.log("執行testSometing");
    return "testSometing";
}

async function testAsync() {
    console.log("執行testAsync");
    return Promise.resolve("hello async");
}

async function test() {
    console.log("test start...");
    const v1 = await testSometing();
    console.log(v1);
    const v2 = await testAsync();
    console.log(v2);
    console.log(v1, v2);
}

test();

var promise = new Promise((resolve)=> { console.log("promise start.."); resolve("promise");});//3
promise.then((val)=> console.log(val));

console.log("test end...")

輸出結果：

1 test start...
2 執行testSometing
3 promise start..
4 test end...
5 promise
6 testSometing
7 執行testAsync
8 hello async
9 testSometing hello async

---

這道題最難理解的地方5和6的執行順序，前面1~4的結果通常沒有異議，若是不明白，百度一下變能夠理解。
5的結果是promise的then方法裏輸出的，6打印的第一個await的返回結果。

下面先說一下async的await：
async 函數中可能會有 await 表達式，這會使 async 函數暫停執行，將await的結果封裝成一個Promise，並等待解析完成後繼續執行，
另外若是await 趕上async函數，阮一峯老師這麼說明：
async 函數返回一個 Promise 對象，當函數執行的時候，一旦遇到 await 就會先返回，等到觸發的異步操做完成，再接着執行函數體內後面的語句。

因此若是await遇到了 async函數，就會封裝兩次Promise，即：

const v1 = await testSometing();

能夠理解成下面的代碼：

new Promise((resolve)=> {
 resolve(Promise.resolve(testSometing()));
}).then((val)=>{
  const v1 = val
  ...
})

按照這個思路，將題目await 都替換成promise：

function testSometing() {
    console.log("執行testSometing");
    return "testSometing";
}

function testAsync() {
    console.log("執行testAsync");
    return Promise.resolve("hello async");
}

async function test() {
    console.log("test start...");
    new Promise((resolve)=> {
     resolve(Promise.resolve(testSometing()));
    }).then((val)=>{
      const v1 = val
      console.log(v1);
      new Promise((resolve)=> {
         resolve(Promise.resolve(testAsync()));
      }).then((val)=>{
          const v2 = val
          console.log(v2);
          console.log(v1, v2);
      })
    })
    
}

test();

var promise = new Promise((resolve)=> { console.log("promise start.."); resolve("promise");});//3
promise.then((val)=> console.log(val));

console.log("test end...")

執行的結果以下：

test start...
執行testSometing
promise start..
test end...
promise
testSometing
執行testAsync
hello async
testSometing hello async

---

你們能夠和最上面的結果對比一下，哈哈！徹底同樣。

這道題應該算是明白了，可是我又發現一個新的問題，如今還沒搞明白，請大神解答