一、異步解決方案的進化史
JavaScript的異步操作一直是個麻煩事,所以不斷有人提出它的各種解決方案。可以追溯到最早的回調(diào)函數(shù)(ajax老朋友),到Promise(不算新的朋友),再到ES6的Generator(強勁的朋友)。
幾年前我們可能用過一個比較著名的Async.js,但是它沒有擺脫回調(diào)函數(shù),并且錯誤處理也是按照“回調(diào)函數(shù)的第一個參數(shù)用來傳遞錯誤”這樣一個約定。而眾所周知的回調(diào)地獄仍然是一個比較突出的問題,直到Generator改變了這種異步風格。
但是ES7的async await的出現(xiàn)(碉堡的新朋友),我們可以輕松寫出同步風格的代碼同時又擁有異步機制,可以說是目前最簡單,最優(yōu)雅,最佳的解決方案了。
二、async await語法
async await語法比較簡單,可以認為是Generator的語法糖,比起星號和yield更具有語義化。下面一個簡單的例子表示1秒之后輸出hello world:
function timeout(ms) { return new Promise((resolve) => { setTimeout(resolve, ms); });}async function asyncPrint(value, ms) { await timeout(ms); console.log(value)}asyncPrint('hello world', 1000);await只能用在async函數(shù)中,如果用在普通函數(shù)就會報錯
await后面跟的是一個Promise對象(當然其它值也可以,但是會包裝成一個立即resolve的Promise,也就沒有意義了)
await會等待Promise的結(jié)果返回再繼續(xù)執(zhí)行
await等待的雖然是Promise對象,但是不必寫.then(),直接可以得到返回值,將上面的代碼微調(diào),發(fā)現(xiàn)返回值result也是可以輸出hello world:
function timeout(ms) { return new Promise((resolve) => { setTimeout(_ => {resolve('hello world')}, ms); });}async function asyncPrint(ms) { let result = await timeout(ms); console.log(result)}asyncPrint(1000);三、async await錯誤處理
前面說了await等待的雖然是Promise對象,但是不必寫.then(),所以其實也不用寫.catch()了,直接用try catch就能捕捉錯誤,這樣可以避免錯誤處理代碼非常冗余和笨重,還是將上面的例子微調(diào):
function timeout(ms) { return new Promise((resolve, reject) => { setTimeout(_ => {reject('error')}, ms);//reject模擬出錯,返回error });}async function asyncPrint(ms) { try { console.log('start'); await timeout(ms);//這里返回了錯誤 console.log('end');//所以這句代碼不會被執(zhí)行了 } catch(err) { console.log(err); //這里捕捉到錯誤error }}asyncPrint(1000);如果有多個await,可以一起放在try catch中:
async function main() { try { const async1 = await firstAsync(); const async2 = await secondAsync(); const async3 = await thirdAsync(); } catch (err) { console.error(err); }}四、async await注意點
|
新聞熱點
疑難解答
圖片精選