I'm trying to fill my $scope.results = [] sequentially by multiple sequential API calls. sequential is important as I'm passing in a start and a limit number (something like pagination). There is a reason that I cannot do this in 1 call and need to break into multiple calls since the API gateway timeouts after 30s.
My problem is in the for loop it doesn't work sequentially. Inside the array all network requests seem to get the same start values and are not sent sequentially. I also cannot use async/await. Is there a way to run the API calls sequentially and get add the result to the results array. My final goal is to fill the array like it happened in a single API call but with multiple calls
$scope.detailedReportOfAll = function () {
$scope.start = 0;
$scope.limit = 15;
$scope.results = [];
var requestCount = 1;
APIService.getDetailedReportData($scope.start,$scope.limit).then(
function ({result,nbPages}) {
if (result.length){
$scope.results = $scope.results.concat(result);
requestCount ++;
$scope.start += $scope.limit;
}
if (requestCount < nbPages){ //I'm running the loop for (nbPages - 1) times
for (i=2; i<nbPages; i++){
APIService.getDetailedReportData($scope.start,$scope.limit).then(
function ({result,nbPages}) {
if (result.length){
$scope.results = $scope.results.concat(result);
requestCount ++;
console.log($scope.results, requestCount)
$scope.start += $scope.limit;
}
})
}
}
}
);
};
This is my http calling function. It returns a promise:
var getDetailedReportData= function (start, limit) {
$rootScope.isLoading = true;
var deferred = $q.defer();
$http
.get(rootURL('/getAllReports/'+start+'/'+limit))
.success(function (response) {
deferred.resolve(response);
})
.catch(function (err) {
deferred.reject(err);
})
.finally(function () {
$rootScope.isLoading = false;
});
return deferred.promise;
};
I'm trying to fill my $scope.results = [] sequentially by multiple sequential API calls. sequential is important as I'm passing in a start and a limit number (something like pagination). There is a reason that I cannot do this in 1 call and need to break into multiple calls since the API gateway timeouts after 30s.
My problem is in the for loop it doesn't work sequentially. Inside the array all network requests seem to get the same start values and are not sent sequentially. I also cannot use async/await. Is there a way to run the API calls sequentially and get add the result to the results array. My final goal is to fill the array like it happened in a single API call but with multiple calls
$scope.detailedReportOfAll = function () {
$scope.start = 0;
$scope.limit = 15;
$scope.results = [];
var requestCount = 1;
APIService.getDetailedReportData($scope.start,$scope.limit).then(
function ({result,nbPages}) {
if (result.length){
$scope.results = $scope.results.concat(result);
requestCount ++;
$scope.start += $scope.limit;
}
if (requestCount < nbPages){ //I'm running the loop for (nbPages - 1) times
for (i=2; i<nbPages; i++){
APIService.getDetailedReportData($scope.start,$scope.limit).then(
function ({result,nbPages}) {
if (result.length){
$scope.results = $scope.results.concat(result);
requestCount ++;
console.log($scope.results, requestCount)
$scope.start += $scope.limit;
}
})
}
}
}
);
};
This is my http calling function. It returns a promise:
var getDetailedReportData= function (start, limit) {
$rootScope.isLoading = true;
var deferred = $q.defer();
$http
.get(rootURL('/getAllReports/'+start+'/'+limit))
.success(function (response) {
deferred.resolve(response);
})
.catch(function (err) {
deferred.reject(err);
})
.finally(function () {
$rootScope.isLoading = false;
});
return deferred.promise;
};
-
Use
asyncandawaitinstead of.then()if you want to sequence asynchronous operations in aforloop. – jfriend00 Commented Feb 23, 2022 at 17:22 - @jfriend00 For some reason no async awaits are used in the codebase. Probably to support old browsers? – cmgchess Commented Feb 23, 2022 at 17:25
-
1
Well you should find out the "for some reason" because modern technology is the simplest, easiest way to solve this problem. Manually sequenced asynchronous loops can be written, but they are not as simple as
async/await. – jfriend00 Commented Feb 23, 2022 at 17:43 -
This is much easier with
async/awaitso if, for some reasons you need to support browsers which don't support that, I would useasync/awaitanyway and then transpile them out with Babel. – Quentin Commented Feb 23, 2022 at 17:45 - Do you have to run the requests sequentially (2nd one doesn't start until first one finishes) or do you just need the results collated into the right sequence? – jfriend00 Commented Feb 23, 2022 at 17:52
1 Answer
Reset to default 2If you want to run these in series then you need to trigger async function n when you know that async function n-1 is finished; i.e. in the then callback. Calling a function recursively is likely to be the easiest way to do this if you've rejected async and await.
function somethingAsync(value) {
return new Promise(res => setTimeout(res, 500, value * value));
}
function processInputInSeries(input) {
function processNext(index, input, results) {
if (index >= input.length) return results;
return somethingAsync(input[index]).then(function (result) {
return processNext(index + 1, input, [...results, result]);
});
}
return processNext(0, input, []);
}
const resultPromise = processInputInSeries([1,2,3]);
resultPromise.then(function(results) { console.log(results) });For parison, async/await is much clearer:
function somethingAsync(value) {
return new Promise(res => setTimeout(res, 500, value * value));
}
async function processInputInSeries(input) {
let results = [];
for (let i = 0; i < input.length; i++) {
const result = await somethingAsync(input[i]);
results = [...results, result];
}
return results;
}
const resultPromise = processInputInSeries([1,2,3]);
resultPromise.then(function(results) { console.log(results) });I would remend writing it that way even if you end up using Babel to transpile your JS to be patible with outdated systems.