Tips on incorporating asynchronous functionality in AngularJS

Question

Tips on incorporating asynchronous functionality in AngularJS

I am currently utilizing AngularJS version 1.5.8 and have a specific requirement. When the user clicks on the Next button, the text inside the button should change to 'Processing...' before completing the operation. I have implemented the $q service within my services to enable asynchronous functionality, but it seems to not be functioning correctly. Please review the code snippets below for more insight.

Service

mainApp.factory('PINVerificationServices', ['$http', '$rootScope','$q', function ($http, $rootScope) {
    return {
        IsPermitted: function (param) {
            return $q($http({
                url: '/Api/ApiPINVerification/IsPermitted/' + param,
                method: 'POST',
                async: true
            }));
        }
    };
}]);

Controller

mainApp.controller('PINVerificationController', function ($scope, $rootScope, $state, $window,$q, PINVerificationServices) {
    $scope.SubmitText = "Next";

    $scope.Next = function () {
    $scope.SubmitText = "Processing...";
    PINVerificationServices.IsPermitted($scope.PIN).then(function (result) {
         $scope.SubmitText = "Next";
    });
  }
}

HTML

  <div class="list-group list-group-sm">
    <div class="list-group-item">
        <input class="form-control" ng-model="PIN" placeholder="PIN" required id="PIN" name="PIN" type="text" />
    </div>
  </div>
  <button type="submit" ng-click="Next()">{{SubmitText}}</button>

javascript angularjs

Answer 1

Answer №1

Give this a shot:

 try {
                fetch('/api/check-permission/' + id, {
                    method: 'POST'
                });
        } catch(error) {
            console.error('Error:', error);
        }

Answer 2

Give this a shot:

 try {
                fetch('/api/check-permission/' + id, {
                    method: 'POST'
                });
        } catch(error) {
            console.error('Error:', error);
        }

Answer 3

Answer №2

Here are the modifications needed based on your requirement for nested $http.

For the factory, utilize only $http without the use of $rootScope. The code should look like this:

    mainApp.factory('PINVerificationServices', ['$http', function ($http) {
        return {
               IsPermitted: function (param) {
                return $http({
                    url: '/Api/ApiPINVerification/IsPermitted/' + param,
                    method: 'POST'
                   });
                },

               GetStudentInformationByPIN : function () {
                return $http({
                    url: '/Api/ApiPINVerification/GetStudentInformationByPIN/', //your api url
                    method: 'GET'
                    });
               }
          };
    }]);

In the controller, implement $q.all():

       mainApp.controller('PINVerificationController', function ($scope, $rootScope, $state, $window,$q, PINVerificationServices) {
       $scope.SubmitText = "Next";
       $scope.Next = function () {
            $scope.SubmitText = "Processing...";                      
            $q.all([PINVerificationServices.IsPermitted($scope.PIN),
            PINVerificationServices.GetStudentInformationByPIN($scope.PI‌N), 
             //other promises
            ]).then(function (result) {
                     if(result[0].data){
                         $scope.SubmitText = "Next";
                     }
                     if(result[1].data){
                         // studentdata response handling
                     }
                    });
            }
        }

Answer 4

Here are the modifications needed based on your requirement for nested $http.

For the factory, utilize only $http without the use of $rootScope. The code should look like this:

    mainApp.factory('PINVerificationServices', ['$http', function ($http) {
        return {
               IsPermitted: function (param) {
                return $http({
                    url: '/Api/ApiPINVerification/IsPermitted/' + param,
                    method: 'POST'
                   });
                },

               GetStudentInformationByPIN : function () {
                return $http({
                    url: '/Api/ApiPINVerification/GetStudentInformationByPIN/', //your api url
                    method: 'GET'
                    });
               }
          };
    }]);

In the controller, implement $q.all():

       mainApp.controller('PINVerificationController', function ($scope, $rootScope, $state, $window,$q, PINVerificationServices) {
       $scope.SubmitText = "Next";
       $scope.Next = function () {
            $scope.SubmitText = "Processing...";                      
            $q.all([PINVerificationServices.IsPermitted($scope.PIN),
            PINVerificationServices.GetStudentInformationByPIN($scope.PI‌N), 
             //other promises
            ]).then(function (result) {
                     if(result[0].data){
                         $scope.SubmitText = "Next";
                     }
                     if(result[1].data){
                         // studentdata response handling
                     }
                    });
            }
        }

Tips on incorporating asynchronous functionality in AngularJS

Answer №1

Answer №2

Similar questions

Struggling to parse the JSON blob that was returned when using express-handlebars in node.js? Let

Issue in Babel: The preset 'latest' could not be located in the directory even though it was installed globally

Navigating to Protected Mobile Platform

Redirecting to a separate component outside the current structure and transferring a callback function

What is the reason for both the d3 line chart and bar chart being shown simultaneously?

What is the best way to retrieve all the keys from an array?

Transferring multiple sets of data from Firestore to another collection proves to be ineffective

Mastering the art of integrating a multi-step form in React

Angularfire allows for easy and efficient updating of fields

"Encountering an issue with AngularJS: Want to use bindToController with a required controller, but

Retrieving the path parameter in a Next.js APIabstractmethod

Implementing a 'Load More' button for a list in Vue.js

You won't find the property 'includes' on a type of 'string[]' even if you're using ES7 features

Tips on incorporating the wait function within the evaluation_now action in Nightmare?

"Unlocking the door: a step-by-step guide to logging in with ajax and json for your hybrid

What could be causing my JSON product list to not load properly?

Guide to clearing input fields and displaying an error message through Ajax when the requested data is not found within a MySQL database

Can you retrieve a reference/pointer to a specific property of an object in JavaScript?

Angular 2 System.config map leading to a 404 error message

Learn how to run a Linux bash command by clicking a button, where the command is generated from user input