當(dāng)一個(gè)接口需要依賴另一個(gè)接口的請求數(shù)據(jù)時(shí)，通常有兩種解決方式，一個(gè)是將請求數(shù)據(jù)的接口設(shè)為同步凹嘲，之后調(diào)另一個(gè)接口，另一個(gè)是在請求數(shù)據(jù)接口的成功回調(diào)里調(diào)另一個(gè)接口悔叽。
但是：當(dāng)一個(gè)接口需要依賴很多個(gè)接口的請求數(shù)據(jù) 或者 一個(gè)依賴另一個(gè)莱衩，另一個(gè)再依賴另一個(gè) 的情況該怎么解決呢？
當(dāng)然你可以按照單個(gè)接口依賴的方式層層嵌套娇澎，結(jié)果就是代碼結(jié)構(gòu)混亂笨蚁，可讀性差，性能差(一個(gè)需要依賴很多個(gè)的時(shí)候要把很多個(gè)設(shè)為同步)趟庄。
因此括细，我們需要一種更優(yōu)雅的異步回調(diào)處理方式--Promise
直接上代碼：
場景一：先調(diào)用getData1，再調(diào)用getData2戚啥，再調(diào)用getData3 ...
//創(chuàng)建一個(gè)Promise實(shí)例奋单，獲取數(shù)據(jù)。并把數(shù)據(jù)傳遞給處理函數(shù)resolve和reject猫十。需要注意的是Promise在聲明的時(shí)候就執(zhí)行了览濒。
var getData1=new Promise(function(resolve,reject){
$.ajax({
type:"get",
url:"index.aspx",
success:function(data){
if(data.Status=="1"){
resolve(data.ResultJson)//在異步操作成功時(shí)調(diào)用
}else{
reject(data.ErrMsg);//在異步操作失敗時(shí)調(diào)用
}
}
});
})
var getData2= new Promise(function(resolve,reject){
$.ajax({
type:"get",
url:"index.aspx",
success:function(data){
if(data.Status=="1"){
resolve(data.ResultJson)//在異步操作成功時(shí)調(diào)用
}else{
reject(data.ErrMsg);//在異步操作失敗時(shí)調(diào)用
}
}
});
})
var getData3=new Promise(function(resolve,reject){
$.ajax({
type:"get",
url:"index.aspx",
success:function(data){
if(data.Status=="1"){
resolve(data.ResultJson)//在異步操作成功時(shí)調(diào)用
}else{
reject(data.ErrMsg);//在異步操作失敗時(shí)調(diào)用
}
}
});
})
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的執(zhí)行依賴getData1和getData2
//Promise的all方法，等數(shù)組中的所有promise對象都完成執(zhí)行
Promise.all([getData1,getData2]).then(function([ResultJson1,ResultJson2]){
//這里寫等這兩個(gè)ajax都成功返回?cái)?shù)據(jù)才執(zhí)行的業(yè)務(wù)邏輯
getData3()
})
優(yōu)點(diǎn)：這樣的代碼分工非常明確拖云，ajax就是拿數(shù)據(jù)的贷笛，.then .catch方法就是處理業(yè)務(wù)邏輯，代碼異常清晰宙项。
