在es6中，回調(diào)地獄就是多層回調(diào)函數(shù)相互嵌套，即回調(diào)函數(shù)中嵌套回調(diào)函數(shù)的情況；它是為了實(shí)現(xiàn)代碼順序執(zhí)行而出現(xiàn)的一種操作，它會造成我們的代碼可讀性非常差，后期不好維護(hù)。es6中使用promise來解決回調(diào)地獄的問題。

本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。

前言

在正式了解“回調(diào)地獄”之前，我們先了解兩個概念：

1、回調(diào)函數(shù)

當(dāng)一個函數(shù)作為參數(shù)傳入另一個參數(shù)中，并且它不會立即執(zhí)行，只有當(dāng)滿足一定條件后該函數(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ù)在主線程上排隊(duì)執(zhí)行，只有前一個任務(wù)執(zhí)行完畢，才能執(zhí)行下一個任務(wù)。異步任務(wù)不進(jìn)入主線程，而是進(jìn)入異步隊(duì)列，前一個任務(wù)是否執(zhí)行完畢不影響下一個任務(wù)的執(zhí)行。同樣，還拿定時器作為異步任務(wù)舉例：

setTimeout(function(){     console.log('執(zhí)行了回調(diào)函數(shù)'); },3000) console.log('111');

如果按照代碼編寫的順序，應(yīng)該先輸出“執(zhí)行了回調(diào)函數(shù)”，再輸出“111”。但實(shí)際輸出為：

這種不阻塞后面任務(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)地獄就是為是實(shí)現(xiàn)代碼順序執(zhí)行而出現(xiàn)的一種操作，它會造成我們的代碼可讀性非常差，后期不好維護(hù)。

那該如何解決回調(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ǔn)骄幊炭梢员ＷC代碼的執(zhí)行順序，前提是每一次在than做完處理后，一定要return一個Promise對象，這樣才能在下一次then時接收到數(shù)據(jù)。

下面是實(shí)例代碼：

        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…,這樣也是不利于代碼維護(hù)的。

所以下面的async/await 可以時代碼看起來更像同步代碼。

2.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ù)是異步的');

當(dāng)把flag設(shè)置為false是，執(zhí)行結(jié)果為：

async關(guān)鍵字說完了，我們看看awai關(guān)鍵字

• await關(guān)鍵字只能在使用async定義的函數(shù)中使用
• await后面可以直接跟一個 Promise實(shí)例對象（可以跟任何表達(dá)式，