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方法就是处理业务逻辑，代码异常清晰。