Optimal method for setting up a controller with multiple asynchronous requests

Question

Optimal method for setting up a controller with multiple asynchronous requests

I am utilizing 2 $http functions within my AngularJS application to populate the page content. These functions are called using ng-init.

ng-init = "getOpen(); getClosed();"

Is this the most optimal approach?

The first function is as follows:

$scope.getOpen = function () {
    $http({
        method: 'post',
        url: "http://www.example.co.uk/php/open-get.php",
        data: $.param({ 'location' : $scope.l, 
                       'time' : $scope.t,
                       'day' : $scope.d,
                       'type' : 'get_restopen' }),
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).
    success (function(data, status, headers, config){
        if(data.success && !angular.isUndefined(data.data) ){
            $scope.open = data.data;
        } else {
            $scope.open = [];
        }
    }).
    error(function(data, status, headers, config) {
        //$scope.messageFailure(data.message);
    });
}

The second function is as follows:

$scope.getClosed = function () {
    $http({
        method: 'post',
        url: "http://www.example.co.uk/php/closed-get.php",
        data: $.param({ 'location' : $scope.l, 
                       'time' : $scope.t,
                       'day' : $scope.d,
                       'type' : 'get_restopen' }),
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).
    success (function(data, status, headers, config){
        if(data.success && !angular.isUndefined(data.data) ){
            $scope.closed = data.data;
        } else {
            $scope.closed = [];
        }
    }).
    error(function(data, status, headers, config) {
        //$scope.messageFailure(data.message);
    });
}

My AngularJS implementation seems to be functioning well. However, I would like some insights on the efficiency of my current method.

1 - Are my $http requests executed concurrently or does one complete before the other one starts?

2 - Would it be beneficial to incorporate $q or promises in my code? Considering that these functions operate independently.

3 - How can I determine when all $http requests have finished execution, regardless of their outcome?

Am I correct in assuming the following code snippet accomplishes this?

$q.all([$scope.getOpen, $scope.getClosed]).then(function() {
     //Both requests have been completed and I shall now set a boolean
     $scope.complete = true;
});

javascript angularjs

Answer 1

Answer №1

If you are the one invoking both functions, then yes, $http calls are inherently asynchronous.
No need to worry because $http actually returns a promise already!
For a seamless approach without altering the promise return, consider using Promise.all() as a completion monitor. More insights can be found on the promise reference page

Answer 2

If you are the one invoking both functions, then yes, $http calls are inherently asynchronous.
No need to worry because $http actually returns a promise already!
For a seamless approach without altering the promise return, consider using Promise.all() as a completion monitor. More insights can be found on the promise reference page

Answer 3

Answer №2

When setting up my page, I have two $http functions that I call using ng-init to populate the data on the page.

The ng-init code looks like this: "ng-init = "getOpen(); getClosed();""

I'm wondering if this is the most effective method?

According to the angular documentation:

Using ngInit in your templates can lead to unnecessary complexity. The directive should only be used for specific purposes such as aliasing properties in ngRepeat or injecting data from server-side scripts. In most cases, it's recommended to use controllers instead of ngInit for initializing scope values.

You can read more about it here: https://docs.angularjs.org/api/ng/directive/ngInit

Avoid using ng-init directly in your templates. Instead, it's better practice to initialize data within a controller by calling a private function.

I also suggest referring to the Angular style guide found at:
https://github.com/johnpapa/angular-styleguide

1 - Do my $http calls run simultaneously or does one finish before the other starts?

Both calls are initiated almost simultaneously. JavaScript maintains a stack of callbacks to execute once responses are received from the server. You can check the network tab in your browser console to see all requests being made.

Moreover, note that `.success` is now deprecated and you should use `.then` instead. Refer to: https://docs.angularjs.org/api/ng/service/$http#deprecation-notice

2 - Is it necessary to introduce $q or promises in my code? The functions are independent.

In this scenario, there's no need for $q or promises. However, you could utilize `$q.all([promise1, promise2])` if you want to execute something after both calls have completed.

3 - How can I determine when all $http requests have finished, regardless of success?

You can explore $httpInterceptors for handling this situation. Here's some sample code implementation:

angular.module("myModule").factory("myHttpInterceptor", [
    "LoadingService",
    "$q",
    "Alert",
    function (LoadingService, $q, Alert) {

        function requestInterceptor(config) {
            LoadingService.increaseCounter();
            return config;
        }

        function responseInterceptor(response) {
            LoadingService.decreaseCounter();
            return response;
        }
   // ...

Is the following code correct?

$q.all([$scope.getOpen, $scope.getClosed]).then(function() {
     // Both requests have been completed, now set a boolean
     $scope.complete = true;
});

No, because you still need the promise returned by your function. Additionally, `.success` does not support promise chaining, so you should use `.then()` instead.

$scope.getOpen = function () {
    return $http({
        // configuration
    }).
    then(function(data, status, headers, config){
        // handle success
    },(function(data, status, headers, config) {
        // handle error
    });

Summary:

angular.module("yourApp").controller("someController", ["$scope", "$q"
    function($scope, $q){

        // initialization
        init();

        // Shared functions

        $scope.getOpen = function () {
          return $http({
             method: 'post',
             url: "http://www.example.co.uk/php/open-get.php",
             data: $.param({ 'location' : $scope.l, 
                   'time' : $scope.t,
                   'day' : $scope.d,
                   'type' : 'get_restopen' }),
             headers: {'Content-Type': 'application/x-www-form-urlencoded'}
          });

        $scope.getClosed = function () {
          return $http({
            // configuration
          });

        // private functions
        function init(){
             var promises = [];

             promises.push($scope.getOpen());
             promises.push($scope.getClosed());

             $q.all(promises).then(function(datas){
                  // At this point, both calls have succeeded
                  // datas[0] contains result of $scope.open()
                  $scope.open = datas[0].data;
                  $scope.complete = true;

             }, function(errors){
                  $scope.complete = true;
                  // This block executes if any call fails
             });
        }

    }
]);

Answer 4

When setting up my page, I have two $http functions that I call using ng-init to populate the data on the page.

The ng-init code looks like this: "ng-init = "getOpen(); getClosed();""

I'm wondering if this is the most effective method?

According to the angular documentation:

Using ngInit in your templates can lead to unnecessary complexity. The directive should only be used for specific purposes such as aliasing properties in ngRepeat or injecting data from server-side scripts. In most cases, it's recommended to use controllers instead of ngInit for initializing scope values.

You can read more about it here: https://docs.angularjs.org/api/ng/directive/ngInit

Avoid using ng-init directly in your templates. Instead, it's better practice to initialize data within a controller by calling a private function.

I also suggest referring to the Angular style guide found at:
https://github.com/johnpapa/angular-styleguide

1 - Do my $http calls run simultaneously or does one finish before the other starts?

Both calls are initiated almost simultaneously. JavaScript maintains a stack of callbacks to execute once responses are received from the server. You can check the network tab in your browser console to see all requests being made.

Moreover, note that `.success` is now deprecated and you should use `.then` instead. Refer to: https://docs.angularjs.org/api/ng/service/$http#deprecation-notice

2 - Is it necessary to introduce $q or promises in my code? The functions are independent.

In this scenario, there's no need for $q or promises. However, you could utilize `$q.all([promise1, promise2])` if you want to execute something after both calls have completed.

3 - How can I determine when all $http requests have finished, regardless of success?

You can explore $httpInterceptors for handling this situation. Here's some sample code implementation:

angular.module("myModule").factory("myHttpInterceptor", [
    "LoadingService",
    "$q",
    "Alert",
    function (LoadingService, $q, Alert) {

        function requestInterceptor(config) {
            LoadingService.increaseCounter();
            return config;
        }

        function responseInterceptor(response) {
            LoadingService.decreaseCounter();
            return response;
        }
   // ...

Is the following code correct?

$q.all([$scope.getOpen, $scope.getClosed]).then(function() {
     // Both requests have been completed, now set a boolean
     $scope.complete = true;
});

No, because you still need the promise returned by your function. Additionally, `.success` does not support promise chaining, so you should use `.then()` instead.

$scope.getOpen = function () {
    return $http({
        // configuration
    }).
    then(function(data, status, headers, config){
        // handle success
    },(function(data, status, headers, config) {
        // handle error
    });

Summary:

angular.module("yourApp").controller("someController", ["$scope", "$q"
    function($scope, $q){

        // initialization
        init();

        // Shared functions

        $scope.getOpen = function () {
          return $http({
             method: 'post',
             url: "http://www.example.co.uk/php/open-get.php",
             data: $.param({ 'location' : $scope.l, 
                   'time' : $scope.t,
                   'day' : $scope.d,
                   'type' : 'get_restopen' }),
             headers: {'Content-Type': 'application/x-www-form-urlencoded'}
          });

        $scope.getClosed = function () {
          return $http({
            // configuration
          });

        // private functions
        function init(){
             var promises = [];

             promises.push($scope.getOpen());
             promises.push($scope.getClosed());

             $q.all(promises).then(function(datas){
                  // At this point, both calls have succeeded
                  // datas[0] contains result of $scope.open()
                  $scope.open = datas[0].data;
                  $scope.complete = true;

             }, function(errors){
                  $scope.complete = true;
                  // This block executes if any call fails
             });
        }

    }
]);

Answer 5

Answer №3

Since $http in asynchronous, it allows your 2 calls to be executed simultaneously. If you find the need to condense both functions into one, or if you want to ensure all $http requests are finished, consider using $q.all. Learn more about Angularjs $q.all here

Answer 6

Since $http in asynchronous, it allows your 2 calls to be executed simultaneously. If you find the need to condense both functions into one, or if you want to ensure all $http requests are finished, consider using $q.all. Learn more about Angularjs $q.all here

Optimal method for setting up a controller with multiple asynchronous requests

Answer №1

Answer №2

Answer №3

Similar questions

Ways to identify when a person has scrolled a specific distance

Attributes requested with jQuery JavaScript Library

Please provide me with the steps to relocate the src/pages/api folder to src/ in a Next.js project

Angular8: Stay Updated with Real-Time Data Refreshment

What is the reason behind localStorage.getItem consistently returning a string value?

Limiting scope on a parent component hinders the ability to communicate with its child

determining if a condition is vacant or occupied

Steps for deploying an ejs website with winscp

Arranging squares in a circular formation with Three.js

Utilize AJAX to connect to a remote domain from an extension

Ways to set values for an array of objects containing identical key names

Tips for updating border color when focused with styled-components

Nested modal in native app utilizes the React Carbon TextInput component for an uneditable input field

Error: Uncaught ReferenceError - 'channel' has not been defined

Issue with navigation links on HTML website not functioning as expected

Displaying content using asynchronous JavaScript and XML (AJAX

Every time I try to set up the MailChimp pop-up javascript, I encounter an Uncaught Error message saying that Bootstrap tooltips need Tether and an Uncaught ReferenceError message

Updating user attributes as an administrator using the Cognito SDK

A unique string containing the object element "this.variable" found in a separate file

The server is sending unprocessed raw JSON data that Angular is unable to handle