如何理解回调地狱?
假如有一天,天气非常好,我出去玩,我想喝奶茶又想吃火锅,奶茶和火锅得等到做好才能吃,他们两为异步操作
我们定义一个获取奶茶和火锅的函数
<script> //获取奶茶的方法 function getTea(fn){ //5秒后获得奶茶 setTimeout(()=>{ //return '奶茶' //但是我们不能return,就调用一个函数传出去 fn('奶茶') },5000) } //调用奶茶的方法,获取到了奶茶 getTea(function(data){ console.log(data); //打印出奶茶 }) //获取火锅得方法 function getHotpot(fn){ setTimeout(()=>{ fn('火锅') },8000) } //调用火锅的方法,获取到了火锅 getHotpot(function(data){ console.log(data); //打印出火锅 }) </script>
这样我们就可以喝奶茶和吃火锅了,
如果我们想先吃火锅在喝奶茶了??
把喝奶茶的函数放在吃火锅里,
<script> //获取奶茶的方法 function getTea(fn){ //5秒后获得奶茶 setTimeout(()=>{ //return '奶茶' //但是我们不能return,就调用一个函数传出去 fn('奶茶') },5000) } //获取火锅得方法 function getHotpot(fn){ setTimeout(()=>{ fn('火锅') },8000) } //调用火锅的方法,获取到了火锅 getHotpot(function(data){ console.log(data); //打印出火锅 //调用奶茶的方法,获取到了奶茶 getTea(function (data) { console.log(data); //打印出奶茶 }) }) </script>
如果我们想喝完奶茶又想在做个美甲了,就在在喝奶茶里调用做美甲的函数.....
如果做完美甲在想干点别的?不断的嵌套
如此如此。。。。
就形成了回调地狱
如何解决?????用promise对象
1.
//用promise对象 //获取奶茶的方法 function getTea(){ //5秒后获得奶茶 return new Promise((resolve)=>{ //通过resolve将数据传出去 setTimeout(() => { resolve('奶茶') }, 1000) }) } //拿到奶茶数据 getTea().then((data)=>{ console.log(data); })
<script> //用promise对象 //获取奶茶的方法 function getTea(){ //5秒后获得奶茶 return new Promise((resolve)=>{ //通过resolve将数据传出去 setTimeout(() => { resolve('奶茶') }, 1000) }) } //获取火锅得方法 function getHotpot(){ return new Promise((resolve) => { //通过resolve将数据传出去 setTimeout(() => { resolve('火锅') }, 2000) }) } //先吃火锅在和奶茶 getHotpot().then((data)=>{ console.log(data); //return一个后面要执行的promise方法 return getTea() }).then(data=>{ console.log(data); }) </script>