Java教程

回调地狱和Promise

本文主要是介绍回调地狱和Promise,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

如何理解回调地狱?
假如有一天,天气非常好,我出去玩,我想喝奶茶又想吃火锅,奶茶和火锅得等到做好才能吃,他们两为异步操作
我们定义一个获取奶茶和火锅的函数

<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>

这篇关于回调地狱和Promise的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!