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