使用Angular怎么實現異步變同步處理

今天就跟大家聊聊有關使用Angular怎么實現異步變同步處理，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

1. 背景

在前端項目中，經常會遇到頁面有多個接口，后一個接口參數需要從前一個接口的返回數據中獲取，這就存在接口必須按順序一個一個執行。而Angular提供的Http服務請求接口都是異步請求，因此通常情況下會寫成如下的代碼：

funA(arg1,arg2,function(){
 funcB(arg1,arg2,function(){
  funcC(arg1,arg2,function(){
    xxxx....
  })
 }) 
});

這不僅造成頁面代碼混亂不易維護，也讓開發者無法追蹤代碼的運行。本身嵌套就已經不容易理解，加上不知何時才能觸發回調，這就相當于雪上加霜。

2. Promise

針對這中現象，Angular推出了Promise規范，它可以幫助開發者將異步變成同步，是一種對執行結果不確定的一種預先定義。例如以下代碼中，當getData方法內的對象成功執行，就會調用success方法，如果失敗，就會調用error方法。另外promise除了then方法之外，還有catch()與finally()方法。

defer. getData()
.then( funcSuccess (){}, funcError (){} )
.catch( function(){})
.finally( function(){});

Finally()方法一般用來處理不管promise是返回成功還是失敗，都會執行的操作。例如ionic中的上拉加載，當獲取數據后不管成功或者失敗，都要廣播結束這次上拉操作，便可將這個操作寫在finally()方法中。

3. $q服務

q服務是AngularJs中自己封裝實現的一種Promise實現，一般有如下三個常用方法：

defer() ：創建一個deferred對象，這個對象可以執行幾個常用的方法，比如resolve，reject，notify等；

all() ：傳入Promise的數組，批量執行，返回一個Promise對象；

when() ：傳入一個不確定的參數，如果符合Promise標準，就返回一個Promise對象。

3.1. defer() 方法

在$q服務中，用defer()方法創建一個deferred對象，然后這個對象可以調用resolve方法定義成功狀態，使用reject方法定義失敗狀態，并且可以在這些方法中傳遞參數，一般接口返回的數據都是用這些方法傳遞出去。最后通過deferred對象 .promise來返回一個promise對象，來定義then方法。then方法中有三個參數，分別是成功回調、失敗回調、狀態變更回調。

定義方法：

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()方法，接下來就能解決多個接口嵌套調用的問題了。

一般處理多個接口需要嵌套執行時，可采用angular的鏈式調用，即：

FunA.then().then().then();

在then方法中return 要調用的下一個接口。如下funA、funB、funC都是返回了promise對象的方法，如果執行順序為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()方法中只寫了成功參數的方法，如果其中一個方法調用返回失敗，則該方法后邊的方法都不會再執行，也就是只有前一個方法調用成功，才能調用后邊的方法。如下為其中一個方法失敗的示例，funB方法調用返回失敗，則不會再執行funC，而錯誤的信息會在最后捕捉錯誤信息的參數方法中獲取。

方法調用：

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()的錯誤信息
});

結果：

如果在某些場景中，等前一個方法調用完畢，而不管這個方法是否調用成功，都要繼續調用后邊的方法，則需要在then()方法中增加錯誤回調并return 下一個執行的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的數組合并成一個。當所有的promise執行成功后，會執行后面的回調，回調中的參數，是每個promise執行的結果。

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() 方法中的參數可以是上面的數組形式，也可以是json格式。相應的，如果參數是數組格式，那么返回的數據格式也是數組格式；如果參數是json格式，那么返回的數據格式也是json格式。json參數示例如下：

$q.all(
 {
 funA:DeferService.funA(3),
 funB:DeferService.funB(3)
 })
.then(function(success){
 console.log(success);
},function(err){
 console.log(err);
})

結果：

上面兩個示例展示的都是獲取數據成功的情況。而當all()方法的參數中存在一個promise失敗，則整個任務都失敗，返回的數據也只會返回該失敗參數的失敗信息。

方法調用：

$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()方法中的參數可以是一個值，也可以是一個promise，這個方法是把傳入的參數處理包裝成一個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怎么實現異步變同步處理有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。