zoukankan      html  css  js  c++  java
  • 使用ES6的Promise完美解决回调地狱

     

    相信经常使用ajax的前端小伙伴,都会遇到这样的困境:一个接口的参数会需要使用另一个接口获取。

    年轻的前端可能会用同步去解决(笑~),因为我也这么干过,但是极度影响性能和用户体验。

    正常的前端会把接口写在另一个接口的回调里。是这样不错,但是它增加了函数的嵌套深度也会造成一定的逻辑混乱。

    也许有朋友会说,哪那么多毛病,解决问题不就好了吗?

    但是,如果需要的是另外好几个接口的返回数据呢?这时候就会比较蛋疼了。这就是回调地狱!

    当时依稀记得是使用了jQuery的 when .then方法去解决的。

    直到遇见了Promise,它完美优雅的解决了回调地狱难题!

    复制代码
    //创建一个Promise实例,获取数据。并把数据传递给处理函数resolve和reject。需要注意的是Promise在声明的时候就执行了。
    var getUserInfo=new Promise(function(resolve,reject){
        $.ajax({
            type:"get",
            url:"index.aspx",
            success:function(data){
                if(data.Status=="1"){
                    resolve(data.ResultJson)//在异步操作成功时调用
                }else{
                    reject(data.ErrMsg);//在异步操作失败时调用
                }
            }
        });
    })
    //另一个ajax Promise对象,
    var getDataList=new Promise(function(resolve,reject){
        $.ajax({
            type:"get",
            url:"index.aspx",
            success:function(data){
                if(data.Status=="1"){
                    resolve(data.ResultJson)//在异步操作成功时调用
                }else{
                    reject(data.ErrMsg);//在异步操作失败时调用
                }
            }
        });
    })
    //Promise的方法then,catch方法
    getUserInfo.then(function(ResultJson){
        //通过拿到的数据渲染页面
    }).catch(function(ErrMsg){
        //获取数据失败时的处理逻辑
    })
    //Promise的all方法,等数组中的所有promise对象都完成执行
    Promise.all([getUserInfo,getDataList]).then(function([ResultJson1,ResultJson2]){
        //这里写等这两个ajax都成功返回数据才执行的业务逻辑
    })
    复制代码

    这样的代码分工非常明确,ajax就是拿数据的,.then .catch方法就是处理业务逻辑,代码异常清晰。

    反正我用了几次之后是离不开它了,很好很强大。

    如果你也想学的话推荐参看ECMAScript 6入门一书中讲解Promise的那一章。

    我百度了很多Promise的文章,觉得阮一峰大神是把它阐述的最清晰易懂的一个。

  • 相关阅读:
    pycharm-1
    WIN7、WIN10 右键在目录当前打开命令行Cmd窗口
    富文本框TinyMCE上传本地图片基本配置
    安装win10正式版后网速变慢的解决方法
    win10远程桌面出现身份验证错误。要求的函数不受支持
    C# 利用VS自带的WSDL工具生成WebService服务类
    解决IIS服务使用C#代码在Windows Server 2012上无法启动Excel的问题
    chorme浏览器不支持audio/video中的autoplay属性的解决方法
    iOS 内购笔记
    利用SortedMap对HashMap进行排序
  • 原文地址:https://www.cnblogs.com/lxg0/p/7339237.html
Copyright © 2011-2022 走看看