? ? 很久沒有更了，今天就來談一下回調(diào)地獄拧烦⊥牛回調(diào)地獄的官方理解上說的是函數(shù)作為參數(shù)層層嵌套看起來很好理解，實(shí)際上就是我們?cè)谧鲈鶭S的時(shí)候產(chǎn)生的回調(diào)函數(shù)恋博，因?yàn)楹瘮?shù)閉包特性齐佳，所以產(chǎn)生層級(jí)嵌套，
? 當(dāng)我們?cè)趫?zhí)行DOM事件操作時(shí),瀏覽器會(huì)悄悄向服務(wù)端發(fā)送很多的沒有必要的http請(qǐng)求,攜帶后臺(tái)可識(shí)別的參數(shù),等待服務(wù)器響應(yīng)返回?cái)?shù)據(jù),這個(gè)過程是異步回調(diào)的,當(dāng)許多功能需要連續(xù)調(diào)用,環(huán)環(huán)相扣依賴時(shí),它就像多層蛋糕一樣债沮。代碼全部一層一層的嵌套,看起來就很龐大,很難以理解,這種情況下就產(chǎn)生了回調(diào)地獄.
? ? 那么回調(diào)地獄究竟應(yīng)該怎樣去解決呢炼吴？
? ? 出現(xiàn)回調(diào)地獄的最主要原因就是自己在編寫代碼的過程中過于刻板，循規(guī)蹈矩疫衩，以至于不斷在一層函數(shù)下接著進(jìn)行第二層硅蹦，已達(dá)到第二層代碼的執(zhí)行效果。但很明顯效果事半功倍。
? ? 首先我們可以在編寫自己的代碼的過程中可以優(yōu)化自己的代碼提针，比如說簡單的命名函數(shù)這一塊命爬，我們不能雜亂無章的寫一堆出來曹傀，可以對(duì)函數(shù)命名辐脖，簡單明了。當(dāng)發(fā)生異常時(shí),你將獲得引用實(shí)際函數(shù)名稱而不是
? “匿名”的堆棧跟蹤皆愉。要時(shí)刻保持自己的代碼簡短美觀嗜价。
? ? 模塊化。如果一堆人都去做一件事情幕庐，每個(gè)人都有自己的思想久锥，如果現(xiàn)在合理分配，每個(gè)人都有自己負(fù)責(zé)的异剥，最后整合到一起是不是會(huì)有條理很多呢瑟由？同理，這里我們就用到了模塊化開發(fā)冤寿。創(chuàng)建一個(gè)JS文件歹苦，
? 將一些重復(fù)出現(xiàn)的代碼切割，模塊化開發(fā)督怜，當(dāng)有需要的時(shí)候直接調(diào)用殴瘦。會(huì)簡單很多。還有像vue框架中常出現(xiàn)的import文件導(dǎo)出也屬于模塊化開發(fā)号杠。
? ? 還有Promise方法蚪腋，采用的執(zhí)行方式也是由上而下的方式。多用在異步編程解決方案上姨蟋。但是它也是書寫代碼不美觀屉凯，有一種縮小版的回調(diào)既視感。
? ? 所以比較接近完美的方法比如像Async functions
? ? Async functions是異步函數(shù)是一個(gè)建議的ES7功能眼溶，它將以更高級(jí)別的語法進(jìn)一步包裝生成器和繼承
? ? async 表示這是一個(gè) async 函數(shù)悠砚，await 只能用在這個(gè)函數(shù)里面
await 表示在這里等待 Promise 返回結(jié)果后，再繼續(xù)執(zhí)行
? ? await 后面跟著的應(yīng)該是一個(gè) Promise 對(duì)象（當(dāng)然偷仿，其他返回值也沒關(guān)系哩簿，只是會(huì)立即執(zhí)行）
await 等待的雖然是 Promise 對(duì)象，但不必寫? .then() 酝静，可以直接得到返回值
? ? function buildCatList(list, returnVal) {
? ? return new Promise(function (resolve, reject) {
? ? ? setTimeout(function (name) {
? ? ? var catList = list === '' ? name : list + ',' + name
? ? ? resolve(catList)
? ? }, 200, returnVal)
}
? ? )
}
function fn(list) {
? ? return list + ',' + 555
}
async function render() {
? ? var a = await buildCatList('','Panther')
? ? var b = await buildCatList(a, 'Jaguar')
? ? var c = await buildCatList(b, 'Lion')
? ? var d = await fn(c)
? ? console.log(d)
}
render()
? ? 這樣看代碼是不是簡潔清晰节榜，異步代碼也具有了“同步”代碼的結(jié)構(gòu)。
