使用ES6的Promise完美解決回撥
相信經常使用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都成功返回資料才執行的業務邏輯
})