回调是啥？

do('eat', (dishes) => { //吃完饭后再去洗盘子 washDishes(dishes)})

上面的代码，大家都常常看到，包括ajax、各种模块的方法等等，他们都是回调函数。

其实就是在执行某些操作（吃饭）后，得到特定数据（盘子），再去调用的一个方法（洗盘子）。

我用着挺好的，为什么会出现回调地狱呢？

ajax1(url, () => { ajax2(url, () => { ajax3(url, () => { doSomething() }) })})

如果在写业务代码的时候，有好几个接口需要你使用，然鹅接口A需要接口B的回调res参数去请求数据呢？ 所以就会写成三四个回调函数嵌套。

这样写代码，虽然看着挺好的，但是少的还好，如果7、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.因为javascript是单线程的，所以有些需要等待的地方，需要使用回调函数。2.由于某些业务的问题，在代码中会一次性写会多层的回调嵌套，回调嵌套后的代码的维护难度，和无法排除bug。这个就被称作回调地狱。3.我在工作中，一般处理的方式是使用promise或者async函数。4.promise由于xxxx 对于开发这种多层嵌套的代码很方便，降低了代码的维护难度等等。5.promise是XXX时新增的，拥有着xxxx的特性等等。6.promise下面的all函数我也经常用到xxxxxxx7.你甚至还可以手写个promise！

作者：Kev1nzh

链接：

关注公众号：前端冒险指南，对话框回复关键字 “前端必备电子书合集”，免费领取经典编程书籍。