回调地狱和Promise

2022-04-06 02:00:37 阅读：167 来源： 互联网

标签：function 地狱 return 火锅 resolve Promise 奶茶回调 data

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

<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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

回调地狱和Promise