zoukankan      html  css  js  c++  java
  • Promise--优雅的异步回调解决方案

    当一个接口需要依赖另一个接口的请求数据时,通常有两种解决方式,一个是将请求数据的接口设为同步,之后调另一个接口,另一个是在请求数据接口的成功回调里调另一个接口。

    但是:当一个接口需要依赖很多个接口的请求数据  或者  一个依赖另一个,另一个再依赖另一个  的情况该怎么解决呢?

    当然你可以按照单个接口依赖的方式层层嵌套,结果就是代码结构混乱,可读性差,性能差(一个需要依赖很多个的时候要把很多个设为同步)。

    因此,我们需要一种更优雅的异步回调处理方式--Promise

    场景一:先调用getData1,再调用getData2,再调用getData3  ...
    
    //创建一个Promise实例,获取数据。并把数据传递给处理函数resolve和reject。需要注意的是Promise在声明的时候就执行了。
    var getData1=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);//在异步操作失败时调用
                }
            }
        });
    })
    
    
    var getData2= 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);//在异步操作失败时调用
                }
            }
        });
    })
    
    var getData3=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);//在异步操作失败时调用
                }
            }
        });
    })
    
    getData1.then(function(res){
      return getData2(res)
    }).then(function(res){
      return getData3(res)
    }).then(function(res){
      console.log(res)
    }).cache(function(error){
      console.log(error)
    })
    
    场景二:getData3的执行依赖getData1和getData2
    //Promise的all方法,等数组中的所有promise对象都完成执行
    Promise.all([getData1,getData2]).then(function([ResultJson1,ResultJson2]){
        //这里写等这两个ajax都成功返回数据才执行的业务逻辑
    
      getData3()
    })

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

  • 相关阅读:
    DetailsView应用之雕虫小技
    Javascript 调用C# 代码并传递参数的两种方法
    一键还原后,重装一遍 bartender7.75软件, 添加空白标签的时候提示 无法找到字体,无法在没文字情况下运行 求电脑帝解释
    JS处理Enter键触发执行的操作
    SoundManager 2 实现web页面中嵌入声音播放
    用Nexus搭建Maven远程仓库[私服]
    AmCharts一款统计图表及股票图表的插件
    HTML5添加网页音效
    Jquerymenuaim流畅的菜单滑动体验
    UML之JUDE{Astah}使用介绍
  • 原文地址:https://www.cnblogs.com/i-want-to-be-like-an-sun/p/9100824.html
Copyright © 2011-2022 走看看