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