javaScript 中最蛋疼的事情莫過(guò)于回調(diào)函數(shù)嵌套問(wèn)題。以往在瀏覽器中，因?yàn)榕c服務(wù)器通訊是一種比較昂貴的操作，因此比較復(fù)雜的業(yè)務(wù)邏輯往往都放在服務(wù)器端，前端 Javascript 只需要少數(shù)幾次 Ajax 請(qǐng)求就可拿到全部數(shù)據(jù)。
但是到了 webapp 風(fēng)行的時(shí)代，前端業(yè)務(wù)邏輯越來(lái)越復(fù)雜，往往幾個(gè) AJAX 請(qǐng)求之間互有依賴，有些請(qǐng)求依賴前面請(qǐng)求的數(shù)據(jù)，有些請(qǐng)求需要并行進(jìn)行。還有在類似 node.js 的后端 JavaScript 環(huán)境中，因?yàn)樾枰M(jìn)行大量 IO 操作，問(wèn)題更加明顯。這個(gè)時(shí)候使用回調(diào)函數(shù)來(lái)組織代碼往往會(huì)導(dǎo)致代碼難以閱讀。
現(xiàn)在比較流行的解決這個(gè)問(wèn)題的方法是使用 PRomise，可以將嵌套的回調(diào)函數(shù)展平。但是寫(xiě)代碼和閱讀依然有額外的負(fù)擔(dān)。
另外一個(gè)方案是使用 ES6 中新增的 generator，因?yàn)?generator 的本質(zhì)是可以將一個(gè)函數(shù)執(zhí)行暫停，并保存上下文，再次調(diào)用時(shí)恢復(fù)當(dāng)時(shí)的狀態(tài)。co 模塊是個(gè)不錯(cuò)的封裝。但是這樣略微有些濫用 generator 特性的感覺(jué)。
ES7 中有了更加標(biāo)準(zhǔn)的解決方案，新增了 async/await 兩個(gè)關(guān)鍵詞。async 可以聲明一個(gè)異步函數(shù)，此函數(shù)需要返回一個(gè) Promise 對(duì)象。await可以等待一個(gè) Promise 對(duì)象 resolve，并拿到結(jié)果。
比如下面的例子，以往我們無(wú)法在 JavaScript 中使用常見(jiàn)的 sleep 函數(shù)，只能使用 setTimeout 來(lái)注冊(cè)一個(gè)回調(diào)函數(shù)，在指定的時(shí)間之后再執(zhí)行。有了 async/await 之后，我們就可以這樣實(shí)現(xiàn)了：
async function sleep(timeout) { return new Promise((resolve, reject) => { setTimeout(function() { resolve(); }, timeout); });}(async function() { console.log('Do some thing, ' + new Date()); await sleep(3000); console.log('Do other things, ' + new Date());})();執(zhí)行此段代碼，可以在終端中看到結(jié)果：
Do some thing, Mon Feb 23 2015 21:52:11 GMT+0800 (CST)Do other things, Mon Feb 23 2015 21:52:14 GMT+0800 (CST)另外 async 函數(shù)可以正常的返回結(jié)果和拋出異常。await 函數(shù)調(diào)用即可拿到結(jié)果，在外面包上 try/catch 就可以捕獲異常。下面是一個(gè)從豆瓣 API 獲取數(shù)據(jù)的例子：
var fetchDoubanApi = function() { return new Promise((resolve, reject) => { var xhr = new xmlHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status >= 200 && xhr.status < 300) { var response; try { response = JSON.parse(xhr.responseText); } catch (e) { reject(e); } if (response) { resolve(response, xhr.status, xhr); } } else { reject(xhr); } } }; xhr.open('GET', 'https://api.douban.com/v2/user/aisk', true); xhr.setRequestHeader("Content-Type", "text/plain"); xhr.send(data); });};(async function() { try { let result = await fetchDoubanApi(); console.log(result); } catch (e) { console.log(e); }})();同 Generator 函數(shù)一樣，async 函數(shù)返回一個(gè) Promise 對(duì)象，可以使用 then 方法添加回調(diào)函數(shù)。當(dāng)函數(shù)執(zhí)行的時(shí)候，一旦遇到 await 就會(huì)先返回，等到觸發(fā)的異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語(yǔ)句。 下面是一個(gè)例子。
async function getStockPriceByName(name) { var symbol = await getStockSymbol(name); var stockPrice = await getStockPrice(symbol); return stockPrice;}getStockPriceByName('goog').then(function (result){ console.log(result);});新聞熱點(diǎn)
疑難解答
圖片精選
