The $q.all() function in angular seems to struggle with resolving properly

Question

The $q.all() function in angular seems to struggle with resolving properly

Having trouble with 3 $http calls in a factory.

Creating 4 promises:

var promise = $q.defer(),
  PBdeferred = $q.defer(),
  Rdeferred = $q.defer(),
  Pdeferred = $q.defer();

Making the first call to the API:

$http.get('/pendingBills').then(function(response) {
  var PendingBills = ['id', 'path', 'reservas', 'importe', 'fecha'];
  PBdeferred.resolve(PendingBills);
});

Resolving the last 2 promises with an empty array for now:

Rdeferred.resolve([]);
Pdeferred.resolve([]);

Using $q.all here:

$q.all([PBdeferred, Rdeferred, Pdeferred]).then(function (results){
    console.log('Results', results);
    promise.resolve({
      PendingBills: results[0],
      Remittances: results[1],
      Payed: results[2]
    });
  });

Returning the top-level promise:

return promise.promise;

The console log displays the promises, but I expected them to be resolved at this point.

Any ideas on how to fix this?

javascript angularjs q

Answer 1

Answer №1

Your usage of $q.all is incorrect. It requires an array or object of promises, not deferreds.

Modify it to:

$q.all([PBdeferred.promise, Rdeferred.promise, Pdeferred.promise])

Answer 2

Your usage of $q.all is incorrect. It requires an array or object of promises, not deferreds.

Modify it to:

$q.all([PBdeferred.promise, Rdeferred.promise, Pdeferred.promise])

Answer 3

Answer №2

Your approach to promises seems to be incorrect, as using deferred can actually break the chain of promises. Instead of using deferred, it is recommended to obtain a promise for each action and then combine them using $q:

var PBpromise = $http.get('/pendingBills').then(function(response) {
  return ['id', 'path', 'reservas', 'importe', 'fecha']; // this will return a promise with the array as the resolve value
});

var Rpromise = $q.resolve(); // a promise that is resolved immediately. Later you can replace it with the $http call 

var Ppromise = $q.resolve(); // a promise that is resolved immediately. Later you can replace it with the $http call 

var promise = $q.all([PBdpromise, Rpromise, Ppromise]).then(function (results){ // $q.all also returns a promise
    console.log('Results', results);
    return { // this will be the resolve value of the returned $q promise
      PendingBills: results[0],
      Remittances: results[1],
      Payed: results[2]
    };
  });

It's worth noting that $q.resolve() is only supported in Angular 1.4 and newer versions. For older versions, you can use $q.when({}) instead of $q.resolve().

Answer 4

Your approach to promises seems to be incorrect, as using deferred can actually break the chain of promises. Instead of using deferred, it is recommended to obtain a promise for each action and then combine them using $q:

var PBpromise = $http.get('/pendingBills').then(function(response) {
  return ['id', 'path', 'reservas', 'importe', 'fecha']; // this will return a promise with the array as the resolve value
});

var Rpromise = $q.resolve(); // a promise that is resolved immediately. Later you can replace it with the $http call 

var Ppromise = $q.resolve(); // a promise that is resolved immediately. Later you can replace it with the $http call 

var promise = $q.all([PBdpromise, Rpromise, Ppromise]).then(function (results){ // $q.all also returns a promise
    console.log('Results', results);
    return { // this will be the resolve value of the returned $q promise
      PendingBills: results[0],
      Remittances: results[1],
      Payed: results[2]
    };
  });

It's worth noting that $q.resolve() is only supported in Angular 1.4 and newer versions. For older versions, you can use $q.when({}) instead of $q.resolve().

The $q.all() function in angular seems to struggle with resolving properly

Answer №1

Answer №2

Similar questions

Utilize AngularJS ngResource to transmit JSON data to the server and receive a response

swap out the CSS class for my own class dynamically

"Troubleshooting a problem with Mongoose's findOne.populate method

Encountering a "Error 404: Page Not Found" message when trying to request a json object from a node server

In the world of Node.js, an error arises when attempting to read properties of undefined, particularly when trying to access the

What is the best way to customize material components using styled components?

Error: AngularJS has encountered an Uncaught ReferenceError stating that the controller is not defined within the

What steps can be taken to verify if the userID retrieved from req.user in Passport JS matches the userID in MongoDB before making any updates or deletions

Is it possible to use a Proxy-object instead of just an index when changing tabs in material-ui/Tabs?

Putting off the execution of a setTimeout()

Switch classes according to scrolling levels

I'm working on separating the functionality to edit and delete entries on my CRM model, but I'm having trouble finding a way to connect these buttons with my data fields

What is the best way to update JSON data using JQuery?

What could be causing React Router to fail in navigating to a nested route?

Discovering if an input field is read-only or not can be achieved by using Selenium WebDriver along with Java

Icon for TypeScript absent from npm package listings

Can a synchronous loop be executed using Promises in any way?

Guide on Linking a Variable to $scope in Angular 2

Do AJAX requests make Cross-site scripting attacks more significant?

Exploring the implementation of useMediaQuery within a class component