相信經常使用ajax的前端小伙伴，都會遇到這樣的困境：一個接口的參數會需要使用另一個接口獲取。
年輕的前端可能會用同步去解決（笑~），因為我也這么干過，但是極度影響性能和用戶體驗。
正常的前端會把接口寫在另一個接口的回調里。是這樣不錯，但是它增加了函數的嵌套深度也會造成一定的邏輯混亂。
也許有朋友會說，哪那么多毛病，解決問題不就好了嗎？
但是，如果需要的是另外好幾個接口的返回數據呢？這時候就會比較蛋疼了。這就是回調地獄！
當時依稀記得是使用了jQuery的 when .then方法去解決的。
直到遇見了Promise,它完美優雅的解決了回調地獄難題！
//創建一個Promise實例，獲取數據。並把數據傳遞給處理函數resolve和reject。需要注意的是Promise在聲明的時候就執行了。
var getUserInfo=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);//在異步操作失敗時調用
}
}
});
})
//另一個ajax Promise對象，
var getDataList=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);//在異步操作失敗時調用
}
}
});
})
//Promise的方法then,catch方法
getUserInfo.then(function(ResultJson){
//通過拿到的數據渲染頁面
}).catch(function(ErrMsg){
//獲取數據失敗時的處理邏輯
})
//Promise的all方法，等數組中的所有promise對象都完成執行
Promise.all([getUserInfo,getDataList]).then(function([ResultJson1,ResultJson2]){
//這里寫等這兩個ajax都成功返回數據才執行的業務邏輯
})
這樣的代碼分工非常明確，ajax就是拿數據的，.then .catch方法就是處理業務邏輯，代碼異常清晰。