AngulrJs-專案中使用$q服務的defer方法處理非同步問題
阿新 • • 發佈:2018-11-21
由於js指令碼語言的獨特性,當同時呼叫多個介面時就不得不處理js的非同步問題。在AngularJs中解決非同步的方法之一:使用$q的defer方法,defer方法會返回一個物件,我們常呼叫resolve()和reject()處理成功時的響應資料和失敗時的響應資料,接下來在方法中返回一個primose物件,最終呼叫方法,使用.then()處理成功回撥函式和失敗回撥函式。 接下來我將以舉例的形式詳細解析上述一段話, 具體闡釋可以看程式碼的註釋部分。
- AngularJs專案中注入$q服務。
**app.controller('IndexSideCtrl', function (DialogService, $scope, $state, $http, $rootScope, $q, $sce, $timeout, blockUi,translateService) { })**
- 在控制器中使用$q服務
app.controller('indexCtrl', function (DialogService, $scope, $state, $http, $rootScope, $q, $sce, $timeout, blockUi,translateService) {//注入$q $scope.deferredObj = $q.defer();//呼叫defer方法 $scope.getData = function () { $http.get(url).success(function(data){ $scope.deferredObj.resolve(data);//處理成功時候的返回資料 }).error(function(data){ $scope.deferredObj.resolve(data);//處理失敗時候的返回資料 }); return $scope.deferredObj.promise;//promise是一種對執行結果不確定的一種預先定義,也就是說有可能成功也有可能失敗,這個就是一個預先定義的一個結果。 }; $scope.getData ().then(function(data) {//該data即為$scope.getData方法返回的promise $scope.getOtherData(data);//此時就可以在getOtherData方法中使用data }); })
- .then()的鏈式呼叫可以處理多個介面的非同步問題。比如說我們需要先呼叫方法A(方法A裡面有介面)獲取資料a, 在方法B中(B方法裡面也有一個介面)使用a資料獲取資料b, 在方法C中使用方法B獲取的資料b。
getA().then(function(a) {
return getB(a)
}).then(function(b) {
return getC(b)
}).then(function(success){
console.log(success);
},function(err){
console.log(err);
});