1. 背景
在前端項目中，經常會遇到頁面有多個接口，后一個接口參數(shù)需要從前一個接口的返回數(shù)據(jù)中獲取，這就存在接口必須按順序一個一個執(zhí)行。而Angular提供的Http服務請求接口都是異步請求，因此通常情況下會寫成如下的代碼：
funA(arg1,arg2,function(){ funcB(arg1,arg2,function(){ funcC(arg1,arg2,function(){ xxxx.... }) }) });這不僅造成頁面代碼混亂不易維護，也讓開發(fā)者無法追蹤代碼的運行。本身嵌套就已經不容易理解，加上不知何時才能觸發(fā)回調，這就相當于雪上加霜。
2. Promise
針對這中現(xiàn)象，Angular推出了Promise規(guī)范，它可以幫助開發(fā)者將異步變成同步，是一種對執(zhí)行結果不確定的一種預先定義。例如以下代碼中，當getData方法內的對象成功執(zhí)行，就會調用success方法，如果失敗，就會調用error方法。另外promise除了then方法之外，還有catch()與finally()方法。
defer. getData().then( funcSuccess (){}, funcError (){} ).catch( function(){}).finally( function(){});Finally()方法一般用來處理不管promise是返回成功還是失敗，都會執(zhí)行的操作。例如ionic中的上拉加載，當獲取數(shù)據(jù)后不管成功或者失敗，都要廣播結束這次上拉操作，便可將這個操作寫在finally()方法中。
3. $q服務
q服務是AngularJs中自己封裝實現(xiàn)的一種Promise實現(xiàn)，一般有如下三個常用方法：
defer() ：創(chuàng)建一個deferred對象，這個對象可以執(zhí)行幾個常用的方法，比如resolve，reject，notify等；
all() ：傳入Promise的數(shù)組，批量執(zhí)行，返回一個Promise對象；
when() ：傳入一個不確定的參數(shù)，如果符合Promise標準，就返回一個Promise對象。
3.1. defer() 方法
在$q服務中，用defer()方法創(chuàng)建一個deferred對象，然后這個對象可以調用resolve方法定義成功狀態(tài)，使用reject方法定義失敗狀態(tài)，并且可以在這些方法中傳遞參數(shù)，一般接口返回的數(shù)據(jù)都是用這些方法傳遞出去。最后通過deferred對象 .promise來返回一個promise對象，來定義then方法。then方法中有三個參數(shù)，分別是成功回調、失敗回調、狀態(tài)變更回調。
定義方法：
function funA(num){ var defer = $q.defer(); if(num<5){ defer.resolve('funA success'); }else{ defer.reject('funA error'); } return defer.promise;}方法調用(返回成功)：
funA(3).then(function(success){ console.log(success);},function(err){ console.log(err);})結果：
方法調用(返回失敗)：
funA(8).then(function(success){ console.log(success);},function(err){ console.log(err);})結果：
3.2. 鏈式調用
了解了defer()方法與then()方法，接下來就能解決多個接口嵌套調用的問題了。
一般處理多個接口需要嵌套執(zhí)行時，可采用angular的鏈式調用，即：
FunA.then().then().then();
在then方法中return 要調用的下一個接口。如下funA、funB、funC都是返回了promise對象的方法，如果執(zhí)行順序為funA、funB、funC，則可用鏈式調用。
function funA(num){ var defer = $q.defer(); if(num<5){ defer.resolve('funA success'); }else{ defer.reject('funA error'); } return defer.promise;} function funB(num){ var defer = $q.defer(); if(num<5){ defer.resolve('funB success'); }else{ defer.reject('funB error'); } return defer.promise;} function funC(num){ var defer = $q.defer(); if(num<5){ defer.resolve('funC success'); }else{ defer.reject('funC error'); } return defer.promise;}方法調用：
funA(3).then(function(success){ console.log(success); return funB(3);}).then(function(success){ console.log(success); return funC(3);}).then(function(success){ console.log(success);},function(err){ console.log(err);});結果：
上述方法調用中，then()方法中只寫了成功參數(shù)的方法，如果其中一個方法調用返回失敗，則該方法后邊的方法都不會再執(zhí)行，也就是只有前一個方法調用成功，才能調用后邊的方法。如下為其中一個方法失敗的示例，funB方法調用返回失敗，則不會再執(zhí)行funC，而錯誤的信息會在最后捕捉錯誤信息的參數(shù)方法中獲取。
方法調用：
funA(3).then(function(success){ console.log(success); return funB(8);}).then(function(success){ console.log(success); return funC(3);}).then(function(success){ console.log(success);},function(err){ console.log(err); //打印funB()的錯誤信息});結果：
如果在某些場景中，等前一個方法調用完畢，而不管這個方法是否調用成功，都要繼續(xù)調用后邊的方法，則需要在then()方法中增加錯誤回調并return 下一個執(zhí)行的promise。如下：
funA(3).then(function(success){ console.log(success); return funB(8);},function(err){ console.log(err); return funB(8);}).then(function(success){ console.log(success); return funC(3);},function(err){ console.log(err); return funC(3);}).then(function(success){ console.log(success);},function(err){ console.log(err);});結果：
3.3. all() 方法
all()方法可以把多個promise的數(shù)組合并成一個。當所有的promise執(zhí)行成功后，會執(zhí)行后面的回調，回調中的參數(shù)，是每個promise執(zhí)行的結果。
function funA(num){ var defer = $q.defer(); if(num<5){ defer.resolve('funA success'); }else{ defer.reject('funA error'); } return defer.promise;} function funB(num){ var defer = $q.defer(); if(num<5){ defer.resolve('funB success'); }else{ defer.reject('funB error'); } return defer.promise;}方法調用：
$q.all([ funA(3), funB(3) ]).then(function(success){ console.log(success);},function(err){ console.log(err);})結果：
all() 方法中的參數(shù)可以是上面的數(shù)組形式，也可以是json格式。相應的，如果參數(shù)是數(shù)組格式，那么返回的數(shù)據(jù)格式也是數(shù)組格式；如果參數(shù)是json格式，那么返回的數(shù)據(jù)格式也是json格式。json參數(shù)示例如下：
$q.all( { funA:DeferService.funA(3), funB:DeferService.funB(3) }).then(function(success){ console.log(success);},function(err){ console.log(err);})結果：
上面兩個示例展示的都是獲取數(shù)據(jù)成功的情況。而當all()方法的參數(shù)中存在一個promise失敗，則整個任務都失敗，返回的數(shù)據(jù)也只會返回該失敗參數(shù)的失敗信息。
方法調用：
$q.all( { funA:DeferService.funA(8), //調用失敗 //正常情況下是調用成功，但由于funA調用失敗，固該方法也是失敗 funB:DeferService.funB(3) }).then(function(success){ console.log(success);},function(err){ console.log(err);})結果：
3.4. when() 方法
when()方法中的參數(shù)可以是一個值，也可以是一個promise，這個方法是把傳入的參數(shù)處理包裝成一個promise。這個方法一般在你不確定所處理的對象或者調用的方法是不是一個promise時使用。
例如在下面的例子中，val=10，并不是一個promise，但是經過when()方法包裝之后，可以通過.then()方法去調用，像處理平常的promise一樣。
var val=10;$q.when(val) .then(function(success){ console.log(success); },function(err){ console.log(err); });結果：
以上這篇Angular異步變同步處理方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
