ES7中利用Await減少回調(diào)嵌套的方法詳解
前言
我們知道javascript是沒辦法阻塞的，所有的等待只能通過回調(diào)來完成，這就造成了回調(diào)嵌套的問題，導(dǎo)致代碼亂到爆，這時(shí)候Await就有用處了。
對(duì)于await的底層機(jī)制這里就不詳述了，以免將文章的篇幅拖的很長(zhǎng)，需要的朋友們可以參考這篇文章：http://chabaoo.cn/article/123257.htm，下面開始本文的正式內(nèi)容。
利用Await減少回調(diào)嵌套
我們大家在開發(fā)的時(shí)候，有時(shí)候需要發(fā)很多請(qǐng)求，然后經(jīng)常會(huì)面臨嵌套回調(diào)的問題，即在一個(gè)回調(diào)里面又嵌了一個(gè)回調(diào)，導(dǎo)致代碼層層縮進(jìn)得很厲害。
如下代碼所示：
ajax({
url: "/list",
type: "GET",
success: function(data) {
appendToDOM(data);
ajax({
url: "/update",
type: "POST",
success: function(data) {
util.toast("Success!");
})
});
}
});
這樣的代碼看起來有點(diǎn)吃力，這種異步回調(diào)通常可以用Promise優(yōu)化一下，可以把上面代碼改成：
new Promise(resolve => {
ajax({
url: "/list",
type: "GET",
success: data => resolve(data);
})
}).then(data => {
appendToDOM(data);
ajax({
url: "/update",
type: "POST",
success: function(data) {
util.toast("Successfully!");
})
});
});
Promise提供了一個(gè)resolve，方便通知什么時(shí)候異步結(jié)束了，不過本質(zhì)還是一樣的，還是使用回調(diào)，只是這個(gè)回調(diào)放在了then里面。
當(dāng)需要獲取多次異步數(shù)據(jù)的時(shí)候，可以使用Promise.all解決：
let orderPromise = new Promise(resolve => {
ajax("/order", "GET", data => resolve(data));
});
let userPromise = new Promise(resolve => {
ajax("/user", "GET", data => resolve(data));
});
Promise.all([orderPromise, userPromise]).then(values => {
let order = values[0],
user = values[1];
});
但是這里也是使用了回調(diào)，有沒有比較優(yōu)雅的解決方式呢？
ES7的await/async可以讓異步回調(diào)的寫法跟寫同步代碼一樣。第一個(gè)嵌套回調(diào)的例子可以用await改成下面的代碼：
// 使用await獲取異步數(shù)據(jù)
let leadList = await new Promise(resolve => {
ajax({
url: "/list",
type: "GET",
success: data => resolve(data);
});
});
// await讓代碼很自然地像瀑布流一樣寫下來
appendToDom(leadList);
ajax({
url: "/update",
type: "POST",
success: () => util.toast("Successfully");
});
Await讓代碼可以像瀑布流一樣很自然地寫下來。
第二個(gè)例子：獲取多次異步數(shù)據(jù)，可以改成這樣：
let order = await new Promise(
resolve => ajax("/order", data => resovle(data))),
user = await new Promise(
resolve => ajax("/user", data => resolve(data)));
// do sth. with order/user
這種寫法就好像從本地獲取數(shù)據(jù)一樣，就不用套回調(diào)函數(shù)了。
Await除了用在發(fā)請(qǐng)求之外，還適用于其它異步場(chǎng)景，例如我在創(chuàng)建訂單前先彈一個(gè)小框詢問用戶是要?jiǎng)?chuàng)建哪種類型的訂單，然后再?gòu)椌唧w的設(shè)置訂單的框，所以按正常思路這里需要傳遞一個(gè)按鈕回調(diào)的點(diǎn)擊函數(shù)，如下圖所示：
但其實(shí)可以使用await解決，如下代碼所示：
let quoteHandler = require("./quote");
// 彈出框詢問用戶并得到用戶的選擇
let createType = await quoteHandler.confirmCreate();
quote里面返回一個(gè)Promise，監(jiān)聽點(diǎn)擊事件，并傳遞createType：
let quoteHandler = {
confirmCreate: function(){
dialog.showDialog({
contentTpl: tpl,
className: "confirm-create-quote"
});
let $quoteDialog = $(".confirm-create-quote form")[0];
return new Promise(resolve => {
$(form.submit).on("click", function(event){
resolve(form.createType.value);
});
});
}
}
這樣外部調(diào)用者就可以使用await，而不用傳遞一個(gè)點(diǎn)擊事件的回調(diào)函數(shù)了。
但是需要注意的是await的一次性執(zhí)行特點(diǎn)。相對(duì)于回調(diào)函數(shù)來說，await的執(zhí)行是一次性的，例如監(jiān)聽點(diǎn)擊事件，然后使用await，那么點(diǎn)擊事件只會(huì)執(zhí)行一次，因?yàn)榇a從上往下執(zhí)行完了，所以當(dāng)希望點(diǎn)擊之后出錯(cuò)了還能繼續(xù)修改和提交就不能使用await，另外使用await獲取異步數(shù)據(jù)，如果出錯(cuò)了，那么成功的resolve就不會(huì)執(zhí)行，后續(xù)的代碼也不會(huì)執(zhí)行，所以請(qǐng)求出錯(cuò)的時(shí)候基本邏輯不會(huì)有問題。
要在babel里面使用await，需要：
（1）安裝一個(gè)Node包
npm install --save-dev babel-plugin-transform-async-to-generator
（2）在工程的根目錄添加一個(gè).babelrc文件，內(nèi)容為：
{
"plugins": ["transform-async-to-generator"]
}
（3）使用的時(shí)候先引入一個(gè)模塊
require("babel-polyfill");
然后就可以愉快地使用ES7的await了。
使用await的函數(shù)前面需要加上async關(guān)鍵字，如下代碼：
async showOrderDialog() {
// 獲取創(chuàng)建類型
let createType = await quoteHandler.confirmCreate();
// 獲取老訂單數(shù)據(jù)
let orderInfo = await orderHandler.getOrderData();
}
我們?cè)倥e一個(gè)例子：使用await實(shí)現(xiàn)JS版的sleep函數(shù)，因?yàn)樵菦]有提供線程休眠函數(shù)的，如下代碼所示：
function sleep (time) {
return new Promise(resolve =>
setTimeout(() => resolve(), time));
}
async function start () {
await sleep(1000);
}
start();
babel的await實(shí)現(xiàn)是轉(zhuǎn)成了ES6的generator，如下關(guān)鍵代碼：
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
// sleep返回一個(gè)Promise對(duì)象
return sleep(1000);
case 2:
case "end":
return _context.stop();
}
}
而babel的generator也是要用ES5實(shí)現(xiàn)的，什么是generator呢？如下圖所示：
生成器用function*定義，每次執(zhí)行生成器的next函數(shù)的時(shí)候會(huì)返回當(dāng)前生成器里用yield返回的值，然后生成器的迭代器往后走一步，直到所有yield完了。
有興趣的可以繼續(xù)研究babel是如何把ES7轉(zhuǎn)成ES5的，據(jù)說原生的實(shí)現(xiàn)還是直接基于Promise.
使用await還有一個(gè)好處，可以直接try-catch捕獲異步過程拋出的異常，因?yàn)槲覀兪遣荒苤苯硬东@異步回調(diào)里面的異常的，如下代碼：
let quoteHandler = {
confirmCreate: function(){
$(form.submit).on("click", function(event){
// 這里會(huì)拋undefined異常：訪問了undefined的value屬性
callback(form.notFoundInput.value);
});
}
}
try {
// 這里無法捕獲到異常
quoteHandler.confirmCreate();
} catch (e) {
}
上面的try-catch是沒有辦法捕獲到異常的，因?yàn)閠ry里的代碼已經(jīng)執(zhí)行完了，在它執(zhí)行的過程中并沒有異常，因此無法在這里捕獲，如果使用Promise的話一般是使用Promise鏈的catch：
let quoteHandler = {
confirmCreate: function(){
return new Promise(resolve => {
$(form.submit).on("click", function(event){
// 這里會(huì)拋undefined異常：訪問了undefined的value屬性
resolve(form.notFoundInput.value);
});
});
}
}
quoteHandler.confirmCreate().then(createType => {
}).catch(e => {
// 這里能捕獲異常
});
而使用await，我們可以直接用同步的catch，就好像它真的變成同步執(zhí)行了：
try {
createType = await quoteHandler.confirmCreate("order");
}catch(e){
console.log(e);
return;
}
總之使用await讓代碼少寫了很多嵌套，很方便的邏輯處理，縱享絲滑。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
js跨域是指通過js在不同的域之間進(jìn)行數(shù)據(jù)傳輸或通信，只要協(xié)議、域名、端口有任何一個(gè)不同，都被當(dāng)作是不同的域，在這篇文章中講給大家介紹一下js中幾種實(shí)用的跨域方法原理,需要的朋友可以參考下2023-06-06
javascript+xml實(shí)現(xiàn)簡(jiǎn)單圖片輪換(只支持IE)
看著許多網(wǎng)站都有廣告自動(dòng)輪換;自己試著寫了一個(gè)圖片輪換,代碼和功能都很簡(jiǎn)單,只支持IE的,FF的還要加些東東,需要了解的朋友可以參考下2012-12-12
本文主要給大家介紹bootstrap組件的知識(shí)，涉及到bootstrap, 組件, 字體圖標(biāo), 上拉菜單的相關(guān)知識(shí)，非常具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
動(dòng)態(tài)加載js、css的實(shí)例代碼
這篇文章主要介紹了動(dòng)態(tài)加載js、css的實(shí)例代碼的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-05-05
Windows Live的@live.com域名注冊(cè)漏洞 利用代碼
Windows Live的@live.com域名注冊(cè)漏洞 利用代碼...2006-12-12
密碼強(qiáng)度檢測(cè)效果實(shí)現(xiàn)原理與代碼
密碼強(qiáng)度檢測(cè)有利于提醒增加密碼的安全指數(shù)，更好的保護(hù)密碼安全,接下來介紹密碼強(qiáng)度檢測(cè)效果的實(shí)現(xiàn)2013-01-01
javascript實(shí)現(xiàn)信息的顯示和隱藏如注冊(cè)頁面
信息的顯示和隱藏在某些時(shí)候還是比較使用的，就比如注冊(cè)信息，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以了解下2013-12-12
JavaScript 模塊的循環(huán)加載實(shí)現(xiàn)方法
本文介紹JavaScript語言如何處理"循環(huán)加載"。目前，最常見的兩種模塊格式CommonJS和ES6，處理方法是不一樣的，返回的結(jié)果也不一樣2015-12-12
小程序的音頻組件居然沒有進(jìn)度控制的功能，需要我們自己實(shí)現(xiàn)，下面腳本之家小編給大家?guī)砹宋⑿判〕绦蚨嘁纛l播放進(jìn)度條問題，感興趣的朋友一起看看吧2018-08-08
將HTML格式的String轉(zhuǎn)化為HTMLElement的實(shí)現(xiàn)方法
本節(jié)主要介紹了將HTML格式的String轉(zhuǎn)化為HTMLElement的實(shí)現(xiàn)方法,需要的朋友可以參考下2014-08-08