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

Clicking on the React Bootstrap Checkbox within the Nav component does not trigger a rerender of the NavItem component

There was an error in Angular at core.js:6150 stating that the object is not iterable due to a

How to Assign a Specific ID to the Body Tag in Wordpress Using functions.php

display the text content of the chosen option on various div elements

Issue with Build System CTA's/Callback function functionality not operational

Non-responsive Click Event on Dynamically Created Div Class

Navigate through modals with ease using Angular Bootstrap UI's Next/Previous feature

I am looking for an image search API that supports JSONP so that users can easily search for images on my website

Exploring the basics of utilizing React Testing Library to test a component - a beginner's dive into this innovative testing tool

Bootstrap Tags Input - the tagsinput does not clear values when removed

An error message 'module.js:557 throw err' appeared while executing npm command in the terminal

Reload the MEN stack webpage without the need to reload the entire page

Creating Dynamic Height for Div Based on Another Element's Height Using ReactJS and CSS

An easy way to place text along the border of an input field in a React JS application using CSS

The command "actions" in Selenium is not recognized

Issue occurs when trying to access the 'set' property of an undefined variable, leading to an error message stating "Cannot read property 'set' of undefined" while using 'this

Implementing dual pagination components in Vue JS for dynamic updates on click

Ensuring User Input Integrity with JavaScript Prompt Validation

ng-options incorporating various conditions

Use a route segment as the callback argument