Handling callback functions in JavaScript when using the $http.get method

Question

Handling callback functions in JavaScript when using the $http.get method

My task involves retrieving multiple http.get requests from a server with different json sets.

After processing each "physical" data set, I need to perform a calculation that requires the value from the corresponding "virtual" call. This calculation is handled by a function called "Calculate" (refer to code snippet below)

Most of the time, this process works smoothly and accurate values are generated. However, there are instances where the $http.get requests do not finish in time, resulting in the values remaining at 0.

How can I ensure that both http.get requests for the physical and virtual calls complete successfully for every "cluster"?

function($scope, $http) {
// Code logic for handling multiple http.get requests...
    
function calculate(string, type, virtual, physical) {

    console.log(type + " capacity " + string + ": " + (virtual / physical).toFixed(2) * 100 + "%");

}
}]);

javascript angularjs

Answer 1

Answer №1

If it is possible to execute them simultaneously, then initiate all of them at the same time and utilize a $q.all method that will be resolved once all promises are fulfilled:

var promiseList = {};
promiseList.virtual1 = $http.get('http:///search?idc=LH5&type=Virtual&cluster=1');
promiseList.virtual2 = $http.get('http:///search?idc=LH5&type=Virtual&cluster=2');
promiseList.physical1 = $http.get('http:///search?idc=LH5&type=Physical&cluster=1');

$q.all(promiseList).then(function (outcomes) {
    // outcomes.virtual1 will contain the results from virtual / cluster 1 promise
    // outcomes.virtual2 will contain the results from virtual / cluster 2
});

Answer 2

If it is possible to execute them simultaneously, then initiate all of them at the same time and utilize a $q.all method that will be resolved once all promises are fulfilled:

var promiseList = {};
promiseList.virtual1 = $http.get('http:///search?idc=LH5&type=Virtual&cluster=1');
promiseList.virtual2 = $http.get('http:///search?idc=LH5&type=Virtual&cluster=2');
promiseList.physical1 = $http.get('http:///search?idc=LH5&type=Physical&cluster=1');

$q.all(promiseList).then(function (outcomes) {
    // outcomes.virtual1 will contain the results from virtual / cluster 1 promise
    // outcomes.virtual2 will contain the results from virtual / cluster 2
});

Answer 3

Answer №2

When you want to make your HTTP requests run concurrently, you can include $q and utilize $q.all() in the following manner:

var httpRequests = [
    $http.get(/* .... */),
    $http.get(/* .... */),
    // add more as needed
];

$q.all(httpRequests).then(function(response) {
    console.log('All requests completed, response:', response);
});

Answer 4

When you want to make your HTTP requests run concurrently, you can include $q and utilize $q.all() in the following manner:

var httpRequests = [
    $http.get(/* .... */),
    $http.get(/* .... */),
    // add more as needed
];

$q.all(httpRequests).then(function(response) {
    console.log('All requests completed, response:', response);
});

Answer 5

Answer №3

Your method of handling calls seems to be incorrect when tailing the calls. The calls appear to be capable of being executed simultaneously, updating independent states tcores[1..5] and tmemory[1..5]. To achieve this, you can make the calls individually and then consolidate them into a large promise that resolves only when all the calls have successfully resolved using $q.all.

var core1 = $http.get('http:///search?idc=LH5&type=Virtual&cluster=1').success(function(data) {
    $scope.servers = data; // retrieve data from JSON
    angular.forEach($scope.servers, function(item) {
        if (parseInt(item.cores) != "NaN" && item.cores != "") {
            if (angular.isNumber(parseInt(item.cores))) {
                tcores1 = parseInt(tcores1) + parseInt(item.cores);
                tmemory1 = parseInt(tmemory1) + parseInt(item.memory);
            }
        }

    })
    console.log("Hall 5. Cluster 1 Total Cores: " + tcores1);
    console.log("Hall 5. Cluster 1 Total Memory: " + tmemory1);
});


var core2 = $http.get('http:///search?idc=LH5&type=Virtual&cluster=2').success(function(data) {

    $scope.servers = data; // retrieve data from JSON
    angular.forEach($scope.servers, function(item) {
        if (parseInt(item.cores) != "NaN" && item.cores != "") {
            if (angular.isNumber(parseInt(item.cores))) {
                tcores2 = parseInt(tcores2) + parseInt(item.cores);
                tmemory2 = parseInt(tmemory2) + parseInt(item.memory);
            }
        }

    })
    console.log("Hall 5. Cluster 2 Total Cores: " + tcores2);
    console.log("Hall 5. Cluster 2 Total Memory: " + tmemory2);
});

// ...

var allRequestsComplete = false;
$q.all([core1, core2, core3, core4, core5]).then(function () {
     allRequestsComplete = true;
});

function calculate() {
    if (!allRequestsComplete) {
          console.log(type + " capacity " + string + ": " + (virtual / physical).toFixed(2) * 100 + "%");
    } else {
          console.log('Calculation in progress.');
    }
}

Answer 6

Your method of handling calls seems to be incorrect when tailing the calls. The calls appear to be capable of being executed simultaneously, updating independent states tcores[1..5] and tmemory[1..5]. To achieve this, you can make the calls individually and then consolidate them into a large promise that resolves only when all the calls have successfully resolved using $q.all.

var core1 = $http.get('http:///search?idc=LH5&type=Virtual&cluster=1').success(function(data) {
    $scope.servers = data; // retrieve data from JSON
    angular.forEach($scope.servers, function(item) {
        if (parseInt(item.cores) != "NaN" && item.cores != "") {
            if (angular.isNumber(parseInt(item.cores))) {
                tcores1 = parseInt(tcores1) + parseInt(item.cores);
                tmemory1 = parseInt(tmemory1) + parseInt(item.memory);
            }
        }

    })
    console.log("Hall 5. Cluster 1 Total Cores: " + tcores1);
    console.log("Hall 5. Cluster 1 Total Memory: " + tmemory1);
});


var core2 = $http.get('http:///search?idc=LH5&type=Virtual&cluster=2').success(function(data) {

    $scope.servers = data; // retrieve data from JSON
    angular.forEach($scope.servers, function(item) {
        if (parseInt(item.cores) != "NaN" && item.cores != "") {
            if (angular.isNumber(parseInt(item.cores))) {
                tcores2 = parseInt(tcores2) + parseInt(item.cores);
                tmemory2 = parseInt(tmemory2) + parseInt(item.memory);
            }
        }

    })
    console.log("Hall 5. Cluster 2 Total Cores: " + tcores2);
    console.log("Hall 5. Cluster 2 Total Memory: " + tmemory2);
});

// ...

var allRequestsComplete = false;
$q.all([core1, core2, core3, core4, core5]).then(function () {
     allRequestsComplete = true;
});

function calculate() {
    if (!allRequestsComplete) {
          console.log(type + " capacity " + string + ": " + (virtual / physical).toFixed(2) * 100 + "%");
    } else {
          console.log('Calculation in progress.');
    }
}

Handling callback functions in JavaScript when using the $http.get method

Answer №1

Answer №2

Answer №3

Similar questions

When you try to import from another file, the method is not defined

Achieve SEO excellence with Angular 4 in production settings

Stop the repetition of the HTML Script element running more than once

What is the appropriate method for transferring a JSON string from JavaScript to PHP and vice versa?

The image remains unchanged in the JavaScript function

Difficulty paginating jqgrid when using an array as the data source

Expand the grid with extra rows once it has been generated, especially when dealing with a large volume of database records, utilizing JQGrid or JSGrid

Retrieving ng-repeat $index with filtering in AngularJS controller

React is throwing a parsing error due to the incorrect use of braces. Remember, JSX elements must be wrapped in an enclosing tag. If you were trying to include multiple elements without a parent tag, you can use a JSX fragment

Learn how to efficiently handle responses from two API calls in AngularJS using the powerful $q.all method along with a service

Is it better to parse HTML in PHP or JavaScript for an iPhone web application?

Retrieve tag, custom taxonomy, and attachment information using the get_pages function

Display the hidden div element when clicked

Error: Cannot set value on a property that is designated as a getter-only in Vue.js using

Tips for Retrieving Information from Firebase in an Angular Application

Storing values in an array when checkboxes are selected within an ng-repeat loop in AngularJS

Update the picture dynamically when hovering

Preventing click propagation for custom react components nested within a MapContainer

I'm encountering an issue with automatically updating content on a webpage

Everything runs smoothly when initiating the API call through npm start, but unexpectedly crashes upon attempting to