Nested Promises in Angular's $q Library

Question

Nested Promises in Angular's $q Library

I'm facing an issue with a function that should return a list of favorite locations. Here's the code snippet in question:

When I call LocationsFactory.getFavoriteLocations(), it returns a promise like this:

getFavoriteLocations: function() {
                if (favorite_locations.length == 0)
                {
                    var deff = $q.defer();
                    obj.getDeviceId().then(function(device_id) {
                    $http.get('url?token=' + device_id).then(function(response) {
                                 favorite_locations = response.data;
                                 deff.resolve(favorite_locations);
                                 return deff.promise;
                               })
                    })
                } else {
                    return favorite_locations;
                }
            }

The getDeviceId function also uses promises to retrieve a key:

getDeviceId: function() {
  var deff = $q.defer();
  deff.resolve(Keychain.getKey());
  return deff.promise;
}

However, when trying to chain these promises together, I encountered an error saying "TypeError: Cannot read property 'then' of undefined." Can someone provide some guidance on how to resolve this issue?

javascript angularjs

Answer 1

Answer №1

One great feature is the ability to chain promises together:

        retrieveTopLocations: function () {
            if (top_locations.length === 0) {
                return obj.obtainDeviceId().then(function (device_id) {
                    return $http.get('url?token=' + device_id).then(function (response) {
                         top_locations = response.data;
                         return top_locations;
                    });
                });
            }

            return $q.resolve(top_locations);
        }

You can also enhance this code snippet by:

obtainDeviceId: function() {
    return $q.resolve(Keychain.getKey());
}

Answer 2

One great feature is the ability to chain promises together:

        retrieveTopLocations: function () {
            if (top_locations.length === 0) {
                return obj.obtainDeviceId().then(function (device_id) {
                    return $http.get('url?token=' + device_id).then(function (response) {
                         top_locations = response.data;
                         return top_locations;
                    });
                });
            }

            return $q.resolve(top_locations);
        }

You can also enhance this code snippet by:

obtainDeviceId: function() {
    return $q.resolve(Keychain.getKey());
}

Answer 3

Answer №2

$q is not necessary in this case:

if (favorite_locations.length == 0)
{
    return obj.getDeviceId() // a promise must be returned here
        .then(function(device_id) { 
            return $http.get('url?token=' + device_id) // response will be accessed below
        })
        .then(function(response) {
            favorite_locations = response.data;
            return favorite_locations
        });
    })
}

This should resolve the issue.

Answer 4

$q is not necessary in this case:

if (favorite_locations.length == 0)
{
    return obj.getDeviceId() // a promise must be returned here
        .then(function(device_id) { 
            return $http.get('url?token=' + device_id) // response will be accessed below
        })
        .then(function(response) {
            favorite_locations = response.data;
            return favorite_locations
        });
    })
}

This should resolve the issue.

Nested Promises in Angular's $q Library

Answer №1

Answer №2

Similar questions

Navigating through a website that loads content dynamically with AJAX can be easily done by

Is it more efficient to pass session variables through an ajax function, or should I access them directly within the script?

Having trouble getting the Babel plugin transform-remove-console to function properly with the Vue CLI 4 and @vue/cli-plugin-babel/preset?

"Encountering timeout issues with Angular's resource module

Convert the XML response from an API into JSON

Exploring AngularJS with Jasmine and the Power of $httpBackend

Jquery animation in Wordpress without any need for scrolling

invoking a function inside a td tag to assign the content

What is the best way to extract a specific value from a JSON object?

Utilizing material-ui's LocalizationProvider to display times in a different time zone

Why isn't the page showing up on my nextjs site?

Node.js seems to be having trouble with emitting events and catching them

Error TS2403: All variable declarations following the initial declaration must be of the same type in a React project

Attempting to publish and install a unique angular2 component using NPM and Angular-CLI results in successful compilation only on the initial try

What is preventing comment upvotes from functioning properly? thinkster.io offers tutorials on AngularJS, MEAN stack, and the function incrementUpvote()

Having trouble with Webpack dynamic import not returning files in ReactJS? Here's how to fix it

The controller element in AngularJS becomes undefined when invoked within a directive

Experiencing issues utilizing vue.js to retrieve information from a REST API

The JavaScript object is not being properly posted to the $_POST variable on the PHP page when using vanilla AJAX

Updating a data with a JavaScript browser script