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方法就是處理業務邏輯，代碼異常清晰。