我有一个页面多次调用 api 以返回一页的记录。信息量很大,加载需要时间。我正在尝试链接 promise ,以便在显示数据的页面加载之前给数据加载时间。我使用以下代码来调用第一部分:
$scope.selectAll = function () {
alert('Please wait while your data is loaded...');
$scope.print.sections = angular.copy($scope.sections);
var promise = getAllSections($scope.print.sections);
promise.then(function () {
$scope.dataLoading = false;
alert('Dataload complete!');
})
};
function getAllSections(sections) {
var deferred = $q.defer();
deferred.notify('Getting Data');
for (var i = 0; i < $scope.print.sections.length; i++) {
getSectionData($scope.print.sections[i]);
}
deferred.resolve('Data Complete')
return deferred.promise;
};
我的问题是函数“getSectionData”调用下面我的服务中的多个函数(为了简洁起见,这只是服务的一部分):
angular.module('myModule').service('contractorService', [
'$http', '$q', function ($http, $q) {
this.getcompletioncertificatepage = function () {
return $http.post('/SSQV4/SSQV5/Contractor/GetCompletionCertificate')
};
this.getselectedcontractorservices = function (id) {
return $http.post('/SSQV4/SSQV5/Contractor/GetSelectedContractorServices?sectionId=' + id)
}
this.getavailablecontractorservices = function (id) {
return $http.post('/SSQV4/SSQV5/Contractor/GetAvailableContractorServices?sectionId=' + id)
};
this.getgeneraluploadimage = function (id) {
return $http.post('/SSQV4/SSQV5/Contractor/GetGeneralUploadDocument?imageType=' + id)
};
this.getemrtabulation = function () {
return $http.post('/SSQV4/SSQV5/Contractor/GetEMRTabulationColumns')
};
this.getimage = function (id, docDate) {
return $http.post('/SSQV4/SSQV5/Contractor/GetImage', {"emrDetailID": id, "docDate" : docDate})
};
this.getemrquestion = function () {
return $http.post('/SSQV4/SSQV5/Contractor/GetEMRQuestion')
};
在我的 Controller 中,我这样调用它们:
function getSectionData(section) {
var id = section.QuestionSectionID;
contractorService.getIncidentColumns(clusterId)
.success(function (data) {
...}
contractorService.getgeneralincidentquestions(id)
.success(function (data) {
...}
... (there are many calls to the service here)
}
我正在尝试弄清楚如何将 promise 与服务一起用于我必须调用和链接它们的每个函数,以便我的“selectAll”函数中的“then”函数不会显示,直到所有get函数已经完成。我尝试将其放入服务中:
this.getIncidentDetailByQtr = function (id) {
var deferred = $q.defer();
$http.post('/SSQV4/SSQV5/Contractor/GetIncidentDetailByQtr?tabId=' + id)
return deferred.promise;
};
在 Controller 中:
var promise = contractorService.getIncidentDetailByQtr(7)
.then(function (data) {
$scope.qtrDetail = data;
deleteTableRows($scope.qtrDetail);
});
这有效,直到我尝试向其他调用添加更多 promise (即 var PromiseA 等)。
当我尝试这样做时:
var promise = contractorService.getIncidentDetailByQtr(7)
.then(function (data) {
$scope.qtrDetail = data;
deleteTableRows($scope.qtrDetail);
});
$scope.incidentTableDefinition = '<table>' + firstRow + secondRow + thirdRow + '<tr style="text-align:center" ng-repeat="q in qtrDetail">' + repeatRow + '</tr></table>';
firstRow = '';
secondRow = '';
thirdRow = '';
repeatRow = '';
var promiseA = contractorService.getincidentsummarycolumns(9)
.then(function (data) {
$scope.summaryColumns = data;
我收到错误“无法获取未定义或空引用的属性“then””。
函数“getSelectedData”对服务进行了大约 15 次调用。我需要最初的“解决”,直到所有这些都完成后才执行。我对此很陌生,但我很确定这与链接 promise 有关,但我不知道如何完成我在这里需要的东西。非常感谢任何帮助!
最佳答案
对“$q.all”进行一些研究后,得到以下结果:
$scope.selectAll = function () {
alert('Please wait while your data is loaded...');
$scope.print.sections = angular.copy($scope.sections);
var promise = getAllSections($scope.print.sections);
promise.then(function () {
$scope.dataLoading = false;
alert('Dataload complete!');
})
};
function getAllSections(sections) {
var promises = [];
angular.forEach(sections, function (section) {
var promise = getSectionData(section)
promises.push(promise);
});
return $q.all(promises);
}
希望这对其他人有帮助。快乐编码!
关于javascript - Angularjs 在服务中使用 Promise,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35633036/