zoukankan      html  css  js  c++  java
  • Promise如何解决回调地狱

    为什么要有promise:解决(回调地狱)的问题

    ### 回调地狱:

    ```js //跟以前的if条件地狱很像

    // if(){ // if(){ // if(){ // } // } //}

    $.get("/getUser",function(res){

      $.get("/getUserDetail",function(){

         $.get("/getCart",function(){

           $.get("/getBooks",function(){ //...

           })

         })

       })

    })

    //node开发:读取文件;开个服务器、接收一个请求、请求路径、访问数据库 ```

    ### Promise函数基本用法
    ```js
    var promise=new Promise((resolve,reject)=>{
      //b 把需要执行的异步操作放在这里
      $.get("/getUser",res=>{
        //获取数据的异步操作已经执行完毕了,等待下一步的执行,通过执行resolve函数,告诉外界你可以执行下一步操作了
        //c、

        resolve(res) //只是一个标记
        //而执行的下一步操作,其实就是写在then的回调函数中的
      })
    })


    //a、
    promise.then(res=>{
      //d、执行后续的操作
      console.log(res);
    })
    ```

        //把异步操作封装在一个promise对象中
        function fn(){
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    console.log('你好');
    
                    //其实异步逻辑到这里其实已经执行完毕了,
                    //就可以告诉外界,可以执行其他操作了
                    //如何告诉外界,让外界得知?
                    resolve();
                },1000);
            })
        }
        //调用了这个函数,执行了异步操作
        //fn()
        //存在问题,并不知道这个异步操作什么时候结束
        fn().then(res=>{
            //执行到下一步
            console.log("下一步");
    
            fn().then(res=>{
                console.log("执行第二步");
            })
        })
    
        //输出顺序:
        //你好
        //下一步
        //你好
        //执行第二步
     function f1(){
            return new Promise(resolve=>{
                setTimeout(()=>{
                    console.log('第一步');
                    
                    //异步逻辑已经执行完,必须要告诉外界我执行完了
                    resolve();
    
                },1000)
            })
        }
        function f2(){
            return new Promise(resolve=>{
                setTimeout(()=>{
                    console.log('第二步');
                    
                    //告诉外界我执行完了
                    resolve();
                },1000)
            })
        }
    
        f1().then(res=>{
            //返回一个promise对象,然后链式调用then方法
            return f2();
        }).then(res=>{
            return f1();
        }).then(res=>{
            return f2();
        }).then(res=>{
            setTimeout(()=>{
                console.log('完成');
            },1000)
        })
  • 相关阅读:
    WSL配置c语言环境
    vue无法获取$store中的变量
    接口自动化中全局参数以及用例信息
    正则表达式
    vue-i18n web 前端国际化
    elementui默认样式修改的问题
    setTimeOut的使用以及this指向问题
    elementui 在表格表头里面添加按钮
    各种
    element ui tabs标签页动态增加标签页,标签页引用组件
  • 原文地址:https://www.cnblogs.com/lguow/p/11315374.html
Copyright © 2011-2022 走看看