2017-02-23 39 views
0

我的AngularJS应用程序具有这样的功能。AngularJS如何等待,直到承诺返回

function createDefaultRequest() { 
 
    
 
    var paramServiceId = currentUser.serviceId; 
 
    var paramStatuses = myRequestService.getStatuses();  
 

 
    var paramSubServices = [];  
 
    paramSubServices = getSubService(paramServiceId); 
 
    vm.subServices = paramSubServices; 
 

 
    var defaultRequest = myRequestService.createRequest(
 
    paramServiceId, paramSubServices, paramStatuses); 
 

 
    return defaultRequest; 
 
} 
 

 
function getSubService(paramServiceId) { 
 
    medicalServiceFactory.subservices().query({ 
 
     serviceId: paramServiceId 
 
    }, 
 
    function(subServicesData) { 
 

 
     subServicesData.forEach(function(thisSubservice) { 
 
     thisSubservice.ticked = true; 
 
     }); 
 
     return subServicesData; 
 
    }, 
 
    function(response) { 
 
     vm.errorMessage = response.statusText; 
 
    }); 
 
}

我想myRequestService.createRequest(...)等到getSubService()回报。现在paramSubServicesvm.subServices总是为空[]。如何在不移动.query()的回调块中的createRequest(...)的情况下实现此目的?谢谢。

+0

是否一个答案解决您的问题? :) – Mistalis

回答

0

您可以使用$q依赖项,您可以在其中定制异步请求。 你应该看看documentation或下面的代码片段。

console.clear(); 
 
var _app = angular.module("ServiceModule", []); 
 

 
_app.service("RequestSubService", ['$q', '$timeout', function ($q, $timeout) { 
 
\t this.getSubService = function(pServiceId) { 
 
    \t var deferred = $q.defer(); 
 
    
 
    //Timeout just to simulate the time it could take (e.g. 5sec) 
 
    $timeout(function() { 
 
    \t if(pServiceId > 0) 
 
     \t deferred.resolve({status: 'success', serviceId: pServiceId}) 
 
     else 
 
     \t deferred.reject({status: 'error', serviceId: pServiceId}); 
 
    }, 5000); 
 
    
 
    return deferred.promise; 
 
    }; 
 
}]); 
 

 
_app.service("RequestService", ['$q', '$timeout', function($q, $timeout) { 
 
\t this.createRequest = function(pServiceId) { 
 
    return "Created request with serviceId: " + pServiceId; 
 
    } 
 
}]) 
 

 
_app.controller("ServiceCtrl", ['$scope', '$timeout', 'RequestSubService', 'RequestService', function($scope, $timeout, requestSubService, requestService) { 
 
    $scope.serviceId = 1; 
 
    
 
    $scope.fetchServices = function() { 
 
    \t $scope.message = "Fetching ..."; 
 
    \t var promise = requestSubService.getSubService($scope.serviceId); 
 
    promise.then(
 
     //Success 
 
     function(data) { 
 
     if(data.status === 'success') 
 
      $scope.message = requestService.createRequest(data.serviceId); 
 
     }, 
 

 
     //Error 
 
     function(error) { 
 
     $scope.message = "An error occured. ServiceId: " + error.serviceId; 
 
     } 
 
    ); 
 
    } 
 
    $scope.fetchServices(); 
 
}]);
body { 
 
    font-family: Arial, Sans-Serif; 
 
} 
 

 
span { 
 
    display: block; 
 
    font-style: italic; 
 
    color: blue; 
 
    margin: 20px 0; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script> 
 
<div ng-app="ServiceModule"> 
 
    <div ng-controller="ServiceCtrl"> 
 
    <span>Input value > 0 will result in success. If value equals 0 it'll throw an error.</span> 
 
    <input type="number" ng-model="serviceId" ng-change="fetchServices()"/> 
 
    <span>{{message}}</span> 
 
    </div> 
 
</div>

0

如果你的服务返回一个承诺,你可以等待承诺只是关键字.then()

myService.myFunction().then(function(result) { 
    // Success callback  
}).then(function(reason) { 
    // Error callback 
}); 

$q docs

then(successCallback, [errorCallback], [notifyCallback])

无论何时该承诺已经或将被解决或被拒绝,只要 结果可用,就立即调用 成功或错误回调之一。回调函数只有一个参数: 结果或拒绝原因。此外,在 该承诺已解决或被拒绝之前,通知回调可能被称为零次或多次以提供进度指示。