回调地狱和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>

标签：function,地狱,return,火锅,resolve,Promise,奶茶,回调,data
来源： https://www.cnblogs.com/kira2022/p/16104743.html