async await 學習、原理、優缺點

特點

1、難點是錯誤處理機制。
2、await命令只能用在async函數之中，如果用在普通函數，就會報錯
3、await 的值可能報錯，所以最好放在try catch中執行
4、async 函數可以保留運行堆棧 ，暫時保存當前執行棧

比起來 Generator ， async函數有什麼優缺點

優點：
1、async函數自帶執行器，自動執行，無需next
2、yield命令後面只能是 Thunk 函數或 Promise 對象，而async函數的await命令後面，可以是 Promise 對象和原始類型的值（數值、字符串和布爾值，但這時會自動轉成立即 resolved 的 Promise 對象）。
3、async函數的返回值是 Promise 對象，這比 Generator 函數的返回值是 Iterator
async和await，比起星號和yield，語義更清楚了。async表示函數裏有異步操作，await表示緊跟在後面的表達式需要等待結果。

注意

• 如果兩個異步方法沒有依賴關係，不要寫成同步的樣子，會阻塞程序執行，最好再用promise.all包裝一下，這樣連個awiat同步執行

簡單實現

原理：一個自動執行的Generator函數

async 轉爲generrator
await 轉爲yield

function autoGentorat(genF) {
    // 返回一個promise，可以鏈式調用
    return new Promise(function(resolve, reject) {
        // 實例化實參(實參是傳遞過來的Generator)，獲得next方法
        let gen = genF();
        function step(result) {
            // Generator執行到最後，done是true，
            if (result.done) {
                resolve(result.value);
            } else {
                // 沒執行完，使用promise的方式讓其進行下一步
                // 因爲 result你不知道是否是一個異步的操作，所以需要promise
                Promise.resolve(result.value).then(function(res) {
                    // 上一步等待執行結果完畢，進行下一步
                    step(gen.next(res));
                });
            }
        }
        // 開始執行generrator第一步
        step(gen.next(undefined));
    });
}

function getUserInfo(){
    return new Promise(function(resolve,relect){
        setTimeout(function(){
            resolve({name:'小劉鴨'})
        },2000)
    })
}

autoGentorat(function*() {
    yield 1;
    let data = yield getUserInfo();
})