Waiting for the result of an AngularJS promise

Question

Waiting for the result of an AngularJS promise

When I click a button in my AngularJS app, the following code is executed:

 if (!$scope.isChecked) {
    $scope.getExistingName($scope.userName).then(function (data) {  
        $scope.userName = data;    
    });
  }

  // Additional processing code followed by another promise  

 myService.save($scope.userName,otherparams).then(function (res) {
       // Redirect to a different page
    }, function (err) {
 });

The problem arises when $scope.isChecked is false, as it enters the promise and before resolving, moves on to the next line of code. This results in $scope.userName not being updated with the new value returned.

I'm seeking suggestions for the best approach to handle this situation. Any advice?

javascript angularjs

Answer 1

Answer №1

To implement this functionality, utilize the $q service. Begin by injecting $q into your Angular controller.

// Initialize an empty promise
var promise;

if (!$scope.isChecked) {
  promise = $scope.getExistingName($scope.userName).then(function(data) {  
    $scope.userName = data;    
  });
}

// Determine whether to wait for the promise or not, based on its status.
$q.all([promise]).then(function() {

  // Add processing code here and then handle another promise  

  myService.save($scope.userName, otherparams).then(function(res) {
    // Redirect to a specific page
  }, function(err) {
  });
});

Answer 2

To implement this functionality, utilize the $q service. Begin by injecting $q into your Angular controller.

// Initialize an empty promise
var promise;

if (!$scope.isChecked) {
  promise = $scope.getExistingName($scope.userName).then(function(data) {  
    $scope.userName = data;    
  });
}

// Determine whether to wait for the promise or not, based on its status.
$q.all([promise]).then(function() {

  // Add processing code here and then handle another promise  

  myService.save($scope.userName, otherparams).then(function(res) {
    // Redirect to a specific page
  }, function(err) {
  });
});

Answer 3

Answer №2

If you find that myService.save needs to wait for the $scope.getExistingName promise before completing, simply move that operation inside the "then" statement.

 if (!$scope.isChecked) {
    $scope.getExistingName($scope.userName).then(function (data) {  
         $scope.userName = data;    
         myService.save($scope.userName,otherparams).then(function (res) {
             //route to page
         }, function (err) {
         });
    });
  }

  //some processing code here followed by another promise

Answer 4

If you find that myService.save needs to wait for the $scope.getExistingName promise before completing, simply move that operation inside the "then" statement.

 if (!$scope.isChecked) {
    $scope.getExistingName($scope.userName).then(function (data) {  
         $scope.userName = data;    
         myService.save($scope.userName,otherparams).then(function (res) {
             //route to page
         }, function (err) {
         });
    });
  }

  //some processing code here followed by another promise

Waiting for the result of an AngularJS promise

Answer №1

Answer №2

Similar questions

Issue with printing error messages for JavaScript form validation

The differences between using the opacity attribute in HTML and the opacity property

JavaScript, Page Method, and GridView are essential components to creating dynamic and interactive

A continuous jQuery method for updating select option values

Filtering data from an Ajax request in Angular using a filter function with JSON

Custom Angular-DataTables filter

Finding the Row Number of an HTML Table by Clicking on the Table - Utilizing JQuery

Embedding a table inside a Bootstrap popover

Update a particular package using Node

What is the reason for Next.js and Gatsby.js necessitating the installation of Node.js, while React.js does not have that requirement?

Retrieve the ETag header from a PUT request in AngularJS using $http

Parsing DXF files using only plain JavaScript

What is the method for retrieving the name of a canceled file?

The function GetURLParameter(sParam) is displaying %20 as blank space in the webpage

Loading background images in CSS before Nivo slider starts causing a problem

Error encountered: Unspecified "from" address in the provided or default options

Transform the given text into components applicable to AngularJS

Flot causes the x-axis display to show incorrect time after a certain period of time

Converting JSON data types into TypeScript interface data types

Troubleshooting Tips: Investigating a Service Call in AngularJS 2 using ES6 Syntax