面試官：你知道Callback Hell（回調地獄）嗎？

前言

這個是做者寫的面試篇章系列第一章，基本源於做者以前一個月內的面試總結，謝謝觀看。

---

回調是啥？爲何叫回調地獄？

do('eat', (dishes) => {
    //吃完飯後再去洗盤子
    washDishes(dishes)
})
複製代碼

上面的代碼，你們都經常看到，包括ajax、各類模塊的方法等等，他們都是回調函數。

其實就是在執行某些操做（吃飯）後，獲得特定數據（盤子），再去調用的一個方法（洗盤子）。

我用着挺好的，爲何會出現回調地獄呢？

ajax1(url, () => {
    ajax2(url, () => {
        ajax3(url, () => {
        doSomething()
        })
    })
})
複製代碼

若是在寫業務代碼的時候，有好幾個接口須要你使用，然鵝接口A須要接口B的回調res參數去請求數據呢？ 因此就會寫成三四個回調函數嵌套。

這樣寫代碼，雖然看着挺好的，可是少的還好，若是七、8個相似場景就爆炸了！

首先說下缺點

• 代碼耦合，一旦修改，原地爆炸。
• 沒法使用try catch，就沒法排錯，也是原地爆炸。

---

大佬們你們一塊兒想辦法，想着想着，就有如下幾種做者擅長的解決方案。

1. generator

const eat = function* () {
    yield 1;
    yield 2;
    return 3;
}
let do = eat();
do.next(); // { value: 1, done: false }
do.next(); // { value: 2, done: false }
do.next(); // { value: 3, done: true }
do.next(); // { value: undefined, done: true }
複製代碼

這是一種解決辦法，詳情能夠看阮一峯老師的es6標準入門（做者不想展開）。

2. promise

let eat = () => {
    return new Promise((resolve, reject) => {
        resolve('俺吃好啦,給你盤子')
    })
}

eat.then( res => {
    //吃完後給你再洗盤子
    let washResult = washDishes(res);
    return washResult;
})
.then(res => {
    //洗完盤子後，你媽媽甚至還獎勵你吃冰淇淋！
    eatIceCream(res)
})
複製代碼

這個但是好東西啊，promise就像是你在追求的女孩阿珍。

他有三種狀態：等待中（pending） 完成了 （resolved） 拒絕了（rejected）。

你給阿珍送了跟項鍊，阿珍在想，到底要不要接收阿強呢？這個就是pending 等待中。

阿珍以爲你挺不錯的，三圍都是180，嗯。接受你了！咱們阿強時候親吻阿珍了。這個就是resovled 完成了。

阿珍以爲阿偉比你帥，不想接受你的求愛，拒絕你了，整個流程碰到錯誤了有問題了。這就是reject 拒絕了

這個就是簡單的promise了。

3. async/await

async function eat () {
    let washResult = await washDishes();
    let eatIceCream = await buyIceCream(washResult);
    let eatCake = await buyCake(eatIceCream);
    //你媽媽看你吃的多，再獎勵大胖兒子一個cake！
}
複製代碼

這個東西呢，其實就是一層語法糖，加上async命令的函數，會return出一個promise。

意思和阿強愛上了阿珍一個道理，只是追求阿珍的路上方便了很多。

---

回到題目！你知道什麼是回調地獄嗎？你能夠這樣說。

1. 回答回調函數是啥？
2. 爲何會有回調地獄？
3. 我該如何解決？
4. 擴展你的解決辦法。
5. 擴展你的解決辦法。
6. 擴展你的解決辦法。

例如做者本身對這個問題的解答以下：

1.由於javascript是單線程的，因此有些須要等待的地方，須要使用回調函數。
2.因爲某些業務的問題，在代碼中會一次性寫會多層的回調嵌套，回調嵌套後的代碼的維護難度，和沒法排除bug。這個就被稱做回調地獄。
3.我在工做中，通常處理的方式是使用promise或者async函數。
4.promise因爲xxxx 對於開發這種多層嵌套的代碼很方便，下降了代碼的維護難度等等。
5.promise是XXX時新增的，擁有着xxxx的特性等等。
6.promise下面的all函數我也常常用到xxxxxxx
7.你甚至還能夠手寫個promise！
複製代碼

---

好了這篇須要講的東西已經結束了。

接下來估計會有一堆堆關於面試的文章。

若是您有收穫或者疑問請在下方評論，求贊！謝謝觀看到這裏。