Access multiple promises data in AngularUI router

Question

I'm trying to use the $q service to resolve multiple promises using the $q.all() function with AngularUI router but for some reasons this fails or it's not working as expected.

This is part of my configuration file that contains the $stateProvider:

.state('home.team',
{
    url : '^/team',
    views : {
        'main' : {
            templateUrl : ConfigProvider.path.views + '/segment/home/team.html',
            controller : 'SegmentHomeTeamCtrl',
            resolve : {
                promiseData : function(ResolveService) { return ResolveService.resolveHomeTeam(); }
            }
        },
        'subMenu' : {
            templateUrl : ConfigProvider.path.views + '/menu/home/team.html'
        }
    }
});

And this is the resolveHomeTeam function located in the Resolve service:

function resolveHomeTeam()
{
    var promises = [];
    promises.push($q.defer());
    UserService.team('me', function(data)
    {
        promises[0].resolve(data);
    }, function()
    {
        promises[0].reject();
    });

    return $q.all(promises);
}

As you can see in this case I'm pushing just one promise into the array and I know for sure that it's being resolved.

Since the only promise is resolved, shouldn't also the promise returned by $q.all() resolved? And shouldn't promiseData data be injected into the SegmentHomeTeamCtrl controller?

If I try to output promiseData inside SegmentHomeTeamCtrl controller I get the whole promise back containing also the actual data returned by the server buy for some reasons I cannot access it.

It just performs an API call to the server and has some callbacks. — siannone
– siannone, Commented Jan 28, 2015 at 18:47

JLRishe · Accepted Answer · 2015-01-28 16:33:32Z

2

The issue with your code is that you are putting a deferred into your array, not a promise.

And on that note, deferreds are quickly going out of fashion. The preferred way to make a promise (and which is consistent with the ES6 APIs) is to use a promise constructor:

function resolveHomeTeam() {
    var promises = [];

    promises.push($q(function (resolve, reject) {
        UserService.team('me', resolve, reject);
    }));

    return $q.all(promises);
}

Note how this also makes your code quite a bit cleaner.

You could also combine this all into one statement if you wanted to:

function resolveHomeTeam() {
    return $q.all([
        $q(function (resolve, reject) {
            UserService.team('me', resolve, reject);
        })
    ]);
}

edited Jan 28, 2015 at 16:33

answered Jan 28, 2015 at 16:28

JLRishe

102k19 gold badges138 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

siannone Over a year ago

This solved my problem and made things easier for me. Thank you for your time :)

New Dev · Accepted Answer · 2015-01-28 16:18:57Z

2

You are doing almost everything correctly: you are returning a promise generated by $q.all and you are further returning it in the resolve.

The bug is that you are not creating an array of promises, but rather you pushed a deferred object into the array.

So, change it like so:

var promises = [];
var teamDefer = $q.defer();
promises.push(teamDefer.promise);

UserService.team('me', function(data)
{
   teamDefer.resolve(data);
}, function()
{
   teamDefer.reject();
});

Then you can return $q.all() (as you do):

return $q.all(promises);

Slightly off-topic:

promiseData is incorrectly named, in my opinion, that may indicate a misunderstanding. You should name the variable as the name of the result of you will get. This is what will be injected into your controller, which would not care whether it came from a promise or not. So, probably better to name it team (or something like that)

answered Jan 28, 2015 at 16:18

New Dev

49.8k12 gold badges99 silver badges140 bronze badges

1 Comment

siannone Over a year ago

I found your answer very useful but I decided to chose the other one simply because it was using the promise constructor (that I was unaware of). Thank you anyway for your time and kindness.

Collectives™ on Stack Overflow

Access multiple promises data in AngularUI router

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related