深入理解async/await來處理異步

目前async/await 已經(jīng)被標準化伐庭，我們需要盡快將學習進程提上日程摔认。
先說一下async的用法狼荞，它作為一個關鍵字放到函數(shù)前面，用于表示函數(shù)是一個異步函數(shù)闽寡，因為async就是異步的意思代兵，異步函數(shù)也就意味著該函數(shù)的執(zhí)行不會阻塞后面代碼的執(zhí)行。下面寫一個async 函數(shù)：

async function timeout() {
　　return 'hello world';
}

語法很簡單爷狈，就是在函數(shù)前面加上async 關鍵字植影，來表示它是異步的，那怎么調用呢涎永？async 函數(shù)也是函數(shù)思币，平時我們怎么使用函數(shù)就怎么使用它，直接加括號調用就可以了羡微，為了表示它沒有阻塞它后面代碼的執(zhí)行谷饿，我們在async 函數(shù)調用之后加一句console.log。

async function timeout() {
    return 'hello world'
}
timeout();
console.log('雖然在后面拷淘，但是我先執(zhí)行');

控制臺

async 函數(shù) timeout 調用了各墨，但是沒有任何輸出，它不是應該返回 'hello world'启涯，先不要著急贬堵，看一看timeout()執(zhí)行返回了什么？把上面的 timeout() 語句改為console.log(timeout())结洼。

async function timeout() {
    return 'hello world'
}
console.log(timeout());
console.log('雖然在后面黎做，但是我先執(zhí)行');

繼續(xù)看控制臺

控制臺

原來async 函數(shù)返回的是一個promise 對象，如果要獲取到promise 返回值松忍，我們應該用then 方法蒸殿，繼續(xù)修改代碼。

async function timeout() {
    return 'hello world'
}
timeout().then(result => {
    console.log(result);
})
console.log('雖然在后面鸣峭，但是我先執(zhí)行');

看控制臺

控制臺

我們獲取到了"hello world'宏所，同時timeout 的執(zhí)行也沒有阻塞后面代碼的執(zhí)行，和我們剛才說的一致摊溶。
這時爬骤，你可能注意到控制臺中的Promise 有一個resolved，這是async 函數(shù)內部的實現(xiàn)原理莫换。如果async 函數(shù)中有返回一個值霞玄，當調用該函數(shù)時骤铃，內部會調用Promise.solve() 方法把它轉化成一個promise 對象作為返回，但如果timeout 函數(shù)內部拋出錯誤呢坷剧？那么就會調用Promise.reject() 返回一個promise 對象惰爬，這時修改一下timeout 函數(shù)

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 對象惫企。

控制臺

如果函數(shù)內部拋出錯誤撕瞧，promise 對象有一個catch 方法進行捕獲。

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

async 關鍵字差不多了狞尔，我們再來考慮await 關鍵字风范，await是等待的意思，那么它等待什么呢沪么，它后面跟著什么呢硼婿？其實它后面可以放任何表達式，不過我們更多的是放一個返回promise 對象的表達式禽车。注意await 關鍵字只能放到async 函數(shù)里面寇漫。

現(xiàn)在寫一個函數(shù)，讓它返回promise 對象殉摔，該函數(shù)的作用是2s 之后讓數(shù)值乘以2州胳。

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

現(xiàn)在再寫一個async 函數(shù)，從而可以使用await 關鍵字逸月，await 后面放置的就是返回promise對象的一個表達式栓撞，所以它后面可以寫上 doubleAfter2seconds 函數(shù)的調用。

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

現(xiàn)在調用testResult 函數(shù):

testResult();

打開控制臺碗硬，2s 之后瓤湘，輸出了60.

現(xiàn)在我們看看代碼的執(zhí)行過程，調用testResult 函數(shù)恩尾，它里面遇到了await, await 表示等一下弛说，代碼就暫停到這里，不再向下執(zhí)行了翰意，它等什么呢木人？等后面的promise對象執(zhí)行完畢，然后拿到promise resolve 的值并進行返回冀偶，返回值拿到之后醒第，它繼續(xù)向下執(zhí)行。具體到我們的代碼, 遇到await 之后进鸠，代碼就暫停執(zhí)行了稠曼，等待doubleAfter2seconds(30) 執(zhí)行完畢，doubleAfter2seconds(30) 返回的promise 開始執(zhí)行堤如，2秒之后蒲列，promise resolve 了，并返回了值為60搀罢，這時await 才拿到返回值60蝗岖，然后賦值給result，暫停結束榔至，代碼才開始繼續(xù)執(zhí)行抵赢，執(zhí)行 console.log語句。

就這一個函數(shù)唧取，我們可能看不出async/await 的作用铅鲤，如果我們要計算3個數(shù)的值，然后把得到的值進行輸出呢枫弟？

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，我們可以看到淡诗，寫異步代碼就像寫同步代碼一樣了骇塘，再也沒有回調地域了。
這就是async/await來處理異步韩容。很簡單吧~