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的文章,觉得阮一峰大神是把它阐述的最清晰易懂的一个。

  • 相关阅读:
    Smart Client Architecture and Design Guide
    Duwamish密码分析篇, Part 3
    庆贺发文100篇
    .Net Distributed Application Design Guide
    New Introduction to ASP.NET 2.0 Web Parts Framework
    SPS toplevel Site Collection Administrators and Owners
    来自Ingo Rammer先生的Email关于《Advanced .Net Remoting》
    The newsletter published by Ingo Rammer
    深度探索.Net Remoting基础架构
    信道、接收器、接收链和信道接受提供程序
  • 原文地址:https://www.cnblogs.com/lxg0/p/7339237.html
Copyright © 2011-2022 走看看