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

children blocking clicks on their parents' divs

What is the best way to set a new value in AngularJS?

Verify if the JSON attribute is empty

Preserve JSON information using Ajax

An uncomplicated broadcasting and receiving method utilizing an event emitter

I must break free! Angular's $sce is failing to manage links to audio files (Strict Contextual Escaping)

AngularJS - Custom directive to add user input to a dynamic list and connect it to a data model

What is the best way to divide a string that includes commas into separate parts?

The functionality of Javascript Regular Expressions is not performing as expected

Unable to modify the styles of nested Material UI components

Error message: "Attempting to assign a value to the 'size' property of an undefined object, despite the fact that

Choosing a populated control using JavaScript results in an empty value

What is the best way to completely reset a personalized AJAX object?

Extracting the value from a Text Editor in React Js: [Code snippet provided]

Jest does not support util.promisify(setTimeout) functionality

Utilizing Grunt to streamline a personalized project

Is there a way to enclose a mention within a unique span tag after highlighting it? Similar to how tags are implemented on platforms such

What is the best way to have child controllers load sequentially within ng-repeat?

Is there a way to retrieve posts by year and month using nextjs and contentful?

Updating multiple collections in MongoDBRestructuring data across multiple