站長資訊網(wǎng)
在es6中，回調(diào)地獄就是多層回調(diào)函數(shù)相互嵌套，即回調(diào)函數(shù)中嵌套回調(diào)函數(shù)的情況；它是為了實現(xiàn)代碼順序執(zhí)行而出現(xiàn)的一種操作，它會造成我們的代碼可讀性非常差，后期不好維護。es6中使用promise來解決回調(diào)地獄的問題。
本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。
前言
在正式了解“回調(diào)地獄”之前，我們先了解兩個概念：
1、回調(diào)函數(shù)
當一個函數(shù)作為參數(shù)傳入另一個參數(shù)中，并且它不會立即執(zhí)行，只有當滿足一定條件后該函數(shù)才可以執(zhí)行，這種函數(shù)就稱為回調(diào)函數(shù)。我們熟悉的定時器和Ajax中就存在有回調(diào)函數(shù)：
setTimeout(function(){ //function(){console.log('執(zhí)行了回調(diào)函數(shù)')}就是回調(diào)函數(shù)，它只有在3秒后才會執(zhí)行 console.log('執(zhí)行了回調(diào)函數(shù)'); },3000) //3000毫秒
這里的回調(diào)函數(shù)是function(){console.log('執(zhí)行了回調(diào)函數(shù)')}，在滿足時間3秒后執(zhí)行。
//1.創(chuàng)建異步對象 var xhr=new XMLHttpRequest(); //2.綁定監(jiān)聽事件(接收請求) xhr.onreadystatechange=function(){ //此方法會被調(diào)用4次 //最后一次，readyState==4 //并且響應(yīng)狀態(tài)碼為200時，才是我們要的響應(yīng)結(jié)果 xhr.status==200 if(xhr.readyState==4 && xhr.status==200){ //把響應(yīng)數(shù)據(jù)存儲到變量result中 var result=xhr.responseText; console.log(result); } } //3.打開鏈接（創(chuàng)建請求） xhr.open("get","/demo/ajaxDemo",true); //4.發(fā)送請求 xhr.send();
這里的回調(diào)函數(shù)是xhr.onreadystatechange綁定的函數(shù)，在xhr.send()發(fā)送請求并拿到響應(yīng)后執(zhí)行。
2、異步任務(wù)
與之相對應(yīng)的概念是“同步任務(wù)”，同步任務(wù)在主線程上排隊執(zhí)行，只有前一個任務(wù)執(zhí)行完畢，才能執(zhí)行下一個任務(wù)。異步任務(wù)不進入主線程，而是進入異步隊列，前一個任務(wù)是否執(zhí)行完畢不影響下一個任務(wù)的執(zhí)行。同樣，還拿定時器作為異步任務(wù)舉例：
setTimeout(function(){ console.log('執(zhí)行了回調(diào)函數(shù)'); },3000) console.log('111');
如果按照代碼編寫的順序，應(yīng)該先輸出“執(zhí)行了回調(diào)函數(shù)”，再輸出“111”。但實際輸出為：
這種不阻塞后面任務(wù)執(zhí)行的任務(wù)就叫做異步任務(wù)。
接下來讓我們看看什么是回調(diào)地獄。
一、回調(diào)地獄是什么？
根據(jù)前面我們可以得出一個結(jié)論：存在異步任務(wù)的代碼，不能保證能按照順序執(zhí)行，那如果我們非要代碼順序執(zhí)行呢？
比如我要說一句話，語序必須是下面這樣的：武林要以和為貴，要講武德，不要搞窩里斗。
我必須要這樣操作，才能保證順序正確：
setTimeout(function () { //第一層 console.log('武林要以和為貴'); setTimeout(function () { //第二程 console.log('要講武德'); setTimeout(function () { //第三層 console.log('不要搞窩里斗'); }, 1000) }, 2000) }, 3000)
可以看到，代碼中的回調(diào)函數(shù)套回調(diào)函數(shù)，居然套了3層，這種回調(diào)函數(shù)中嵌套回調(diào)函數(shù)的情況就叫做回調(diào)地獄。
總結(jié)一下，回調(diào)地獄就是為是實現(xiàn)代碼順序執(zhí)行而出現(xiàn)的一種操作，它會造成我們的代碼可讀性非常差，后期不好維護。
那該如何解決回調(diào)地獄呢？
二、如何解決回調(diào)地獄
1.Promise
Promise是js中的一個原生對象，是一種異步編程的解決方案，可以替換掉傳統(tǒng)的回調(diào)函數(shù)解決方案。
-
Promise構(gòu)造函數(shù)接收一個函數(shù)作為參數(shù)，我們需要處理的異步任務(wù)就卸載該函數(shù)體內(nèi)，該函數(shù)的兩個參數(shù)是resolve，reject。異步任務(wù)執(zhí)行成功時調(diào)用resolve函數(shù)返回結(jié)果，反之調(diào)用reject。
-
Promise對象的then方法用來接收處理成功時響應(yīng)的數(shù)據(jù)，catch方法用來接收處理失敗時相應(yīng)的數(shù)據(jù)。
-
Promise的鏈式編程可以保證代碼的執(zhí)行順序，前提是每一次在than做完處理后，一定要return一個Promise對象，這樣才能在下一次then時接收到數(shù)據(jù)。
下面是實例代碼：
function fn(str){ var p=new Promise(function(resolve,reject){ //處理異步任務(wù) var flag=true; setTimeout(function(){ if(flag){ resolve(str) } else{ reject('操作失敗') } }) }) return p; } fn('武林要以和為貴') .then((data)=>{ console.log(data); return fn('要講武德'); }) .then((data)=>{ console.log(data); return fn('不要搞窩里斗') }) .then((data)=>{ console.log(data); }) .catch((data)=>{ console.log(data); })
但是Promise最大的問題就是代碼冗余，原來的異步任務(wù)被Promise封裝一下，不管什么操作都用than，就會導(dǎo)致一眼看過去全是then…then…then…,這樣也是不利于代碼維護的。
所以下面的async/await 可以時代碼看起來更像同步代碼。
首先我們看async關(guān)鍵字，他作為一個關(guān)鍵字放到聲明函數(shù)前面，表示該函數(shù)為一個異步任務(wù)，不會阻塞后面函數(shù)的執(zhí)行：
async function fn(){ return '不講武德'; } console.log(fn());
可以看到async函數(shù)返回數(shù)據(jù)時自動封裝為一個Promise對象。
和Promise對象一樣，處理異步任務(wù)時也可以按照成功和失敗來返回不同的數(shù)據(jù)，處理成功時用then方法來接收，失敗時用catch方法來接收數(shù)據(jù)：
async function fn() { var flag = true; if (flag) { return '不講武德'; } else{ throw '處理失敗' } } fn() .then(data=>{ console.log(data); }) .catch(data=>{ console.log(data); }) console.log('先執(zhí)行我，表明async聲明的函數(shù)是異步的');
當把flag設(shè)置為false是，執(zhí)行結(jié)果為：
async關(guān)鍵字說完了，我們看看awai關(guān)鍵字
- await關(guān)鍵字只能在使用async定義的函數(shù)中使用
- await后面可以直接跟一個 Promise實例對象（可以跟任何表達式，
