面试官：你知道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！
复制代码

---

好了这篇须要讲的东西已经结束了。

接下来估计会有一堆堆关于面试的文章。

若是您有收获或者疑问请在下方评论，求赞！谢谢观看到这里。