前言

async/await是ES7的寫法，可以讓非同步call back寫法看起來像同步的順序去執行。

async表達式

async function myFunction(){
    return 'done';
};
myFunction();

我們可以發現在JavaScript的function除了可以返回"值"，還可以返回"Promise"並且把值(PromiseValue)包進Promise裡面了，有學過Promise的人有發現以下的Promise表達式與async有87分像嗎？！

Promise 表達式

以下我們new一個Promise的class並return給一個function

const myFunction = function(){
    return new Promise(function(resolve, reject){
        return resolve('done');
    })
};
myFunction()

沒錯，async寫法簡化了要先new Promise的步驟，至於為什麼PromiseValue的值是"undefine"。那是因為Promise的PromiseStatus有分三種狀態：預設是pending然後再改變成resolve或是reject。

Promise必須以.then()去invoke後，等狀態(PromiseStatus)變成"resolv"才會接收到值(promiseValue)。

然而因為async的function已經是回傳Promise了，所以竟然也可以用.then()去invoke，我們來看結合.then表達式：

async function myFunction(){
    return 'done';
};
myFunction().then(function(result){
    console.log(result)
});

但要記得.then(這裡要放一個call back function才能看到值)，只是很奇怪地隨然有看到值，但是PromiseValue卻是undefine??(希望有人能解惑XD)。

我會問，那為什麼then裡面要放call back function?

由Call Back表達式來解釋原因

function promise(resolve) {
    resolve(5);
}

promise(result => {
    console.log(result)
})

有注意到上面長得很像Promise嗎？比對起來，原來Promise的resolve是function的名稱，Promise所運行的結果會傳進result參數，然後參數就被console.log給印出來。

那Promise可以跟await組合技嗎？

既然async function會返回一個Promise，所以當然可以！
await這行會讓Promise停下來，並等執行完後，才會賦值給等號左邊或是往下繼續執行。所以下面程式碼結果會是先出現"ok"，等待1秒後才出現"done!"

async function a(){
    await wait(1000)
    console.log('done!')
}

async function wait(ms) {
    console.log('ok')
    return new Promise(resolve => {
      setTimeout(resolve, ms);
    });
}
a()
//執行結果：
ok
done!