1. 程式人生 > >AngulrJs-專案中使用$q服務的defer方法處理非同步問題

AngulrJs-專案中使用$q服務的defer方法處理非同步問題

由於js指令碼語言的獨特性,當同時呼叫多個介面時就不得不處理js的非同步問題。在AngularJs中解決非同步的方法之一:使用$q的defer方法,defer方法會返回一個物件,我們常呼叫resolve()和reject()處理成功時的響應資料和失敗時的響應資料,接下來在方法中返回一個primose物件,最終呼叫方法,使用.then()處理成功回撥函式和失敗回撥函式。 接下來我將以舉例的形式詳細解析上述一段話, 具體闡釋可以看程式碼的註釋部分。

  1. AngularJs專案中注入$q服務。
**app.controller('IndexSideCtrl', function (DialogService, $scope, $state, $http, $rootScope, $q, $sce, $timeout, blockUi,translateService) {
})**
  1. 在控制器中使用$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
    });
})
  1. .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);
	});