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 doesnt 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;
};
Help is much appreciated
If 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 comparison, 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 recommend writing it that way even if you end up using Babel to transpile your JS to be compatible with outdated systems.