JavaScript 的 async/await

隨着 Node 7 的發佈，愈來愈多的人開始研究聽說是異步編程終級解決方案的 async/await。

異步編程的最高境界，就是根本不用關心它是否是異步。

async 函數就是隧道盡頭的亮光，不少人認爲它是異步操做的終極解決方案。

async 和 await 起了什麼做用

async 起什麼做用

這個問題的關鍵在於，async 函數是怎麼處理它的返回值的！

咱們固然但願它能直接經過 return 語句返回咱們想要的值，可是若是真是這樣，彷佛就沒 await 什麼事了。因此，寫段代碼來試試，看它到底會返回什麼：

async function testAsync() { return "hello async"; } const result = testAsync(); console.log(result);

看到輸出就恍然大悟了——輸出的是一個 Promise 對象。

c:\var\test> node --harmony_async_await . Promise { 'hello async' }

因此，async 函數返回的是一個 Promise 對象。從文檔中也能夠獲得這個信息。async 函數（包含函數語句、函數表達式、Lambda表達式）會返回一個 Promise 對象，若是在函數中 return 一個直接量，async 會把這個直接量經過 Promise.resolve() 封裝成 Promise 對象。

async 函數返回的是一個 Promise 對象，因此在最外層不能用 await 獲取其返回值的狀況下，咱們固然應該用原來的方式：then() 鏈來處理這個 Promise 對象，就像這樣

testAsync().then(v => { console.log(v); // 輸出 hello async });

　　 語法很簡單，就是在函數前面加上async 關鍵字，來表示它是異步的，那怎麼調用呢？async 函數也是函數，平時咱們怎麼使用函數就怎麼使用它，直接加括號調用就能夠了，爲了表示它沒有阻塞它後面代碼的執行，咱們在async 函數調用以後加一句console.log;

async function timeout() {
    return 'hello world'
}
timeout();
console.log('雖然在後面，可是我先執行');

　　打開瀏覽器控制檯，咱們看到了

　　async 函數 timeout  調用了，可是沒有任何輸出，它不是應該返回 'hello world',  先不要着急， 看一看timeout()執行返回了什麼？ 把上面的 timeout() 語句改成console.log(timeout())

async function timeout() {
    return 'hello world'
}
console.log(timeout());
console.log('雖然在後面，可是我先執行');

　　繼續看控制檯

　　原來async 函數返回的是一個promise 對象，若是要獲取到promise 返回值，咱們應該用then 方法， 繼續修改代碼

async function timeout() {
    return 'hello world'
}
timeout().then(result => {
    console.log(result);
})
console.log('雖然在後面，可是我先執行');

　　看控制檯

　　咱們獲取到了"hello world',  同時timeout 的執行也沒有阻塞後面代碼的執行，和 咱們剛纔說的一致。

　　這時，你可能注意到控制檯中的Promise 有一個resolved，這是async 函數內部的實現原理。若是async 函數中有返回一個值 ,當調用該函數時，內部會調用Promise.solve() 方法把它轉化成一個promise 對象做爲返回，但若是timeout 函數內部拋出錯誤呢？ 那麼就會調用Promise.reject() 返回一個promise 對象， 這時修改一下timeout 函數

async function timeout(flag) {
    if (flag) {
        return 'hello world'
    } else {
        throw 'my god, failure'
    }
}
console.log(timeout(true))  // 調用Promise.resolve() 返回promise 對象。
console.log(timeout(false)); // 調用Promise.reject() 返回promise 對象。

　　控制檯以下：

　　若是函數內部拋出錯誤， promise 對象有一個catch 方法進行捕獲。

timeout(false).catch(err => {
    console.log(err)
})

　　async 關鍵字差很少了，咱們再來考慮await 關鍵字，await是等待的意思，那麼它等待什麼呢，它後面跟着什麼呢？其實它後面能夠聽任何表達式，不過咱們更多的是放一個返回promise 對象的表達式。注意await 關鍵字只能放到async 函數裏面

　　如今寫一個函數，讓它返回promise 對象，該函數的做用是2s 以後讓數值乘以2

// 2s 以後返回雙倍的值
function doubleAfter2seconds(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2 * num)
        }, 2000);
    } )
}

　　如今再寫一個async 函數，從而可使用await 關鍵字， await 後面放置的就是返回promise對象的一個表達式，因此它後面能夠寫上 doubleAfter2seconds 函數的調用

async function testResult() {
    let result = await doubleAfter2seconds(30);
    console.log(result);
}

　　如今調用testResult 函數

testResult();

　　打開控制檯，2s 以後，輸出了60. 

　　如今咱們看看代碼的執行過程，調用testResult 函數，它裏面遇到了await, await 表示等一下，代碼就暫停到這裏，再也不向下執行了，它等什麼呢？等後面的promise對象執行完畢，而後拿到promise resolve 的值並進行返回，返回值拿到以後，它繼續向下執行。具體到 咱們的代碼, 遇到await 以後，代碼就暫停執行了， 等待doubleAfter2seconds(30) 執行完畢，doubleAfter2seconds(30) 返回的promise 開始執行，2秒 以後，promise resolve 了， 並返回了值爲60， 這時await 纔拿到返回值60， 而後賦值給result， 暫停結束，代碼纔開始繼續執行，執行 console.log語句。

　　就這一個函數，咱們可能看不出async/await 的做用，若是咱們要計算3個數的值，而後把獲得的值進行輸出呢？

async function testResult() {
    let first = await doubleAfter2seconds(30);
    let second = await doubleAfter2seconds(50);
    let third = await doubleAfter2seconds(30);
    console.log(first + second + third);
}

　　6秒後，控制檯輸出220, 咱們能夠看到，寫異步代碼就像寫同步代碼同樣了，再也沒有回調地域了。