前言
这个是作者写的面试篇章系列第一章,基本源于作者之前一个月内的面试总结,谢谢观看。
回调是啥?为什么叫回调地狱?
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函数我也经常用到xxxxxxx
7.你甚至还可以手写个promise!