Understanding promises in AngularJS

Question

I´m trying to understand promises in Angular. But I'm still mixing concepts. Please have a look at the following example in Angular 1.0.7:

// After locale is set code should be executed
initLocale(language).then(function (result) {               
    console.log("Insert code here");
});

Can someone can help me to understand why this code is working:

var initLocale = function(language) {
    return $translate.uses(language);
};

And this code is not:

var initLocale = function(language) {
    $translate.uses(language).then(function(result) {
        // I need to do things here! For example call another 
        // Asynchronous function.
        tmhDynamicLocale.set(language).then(function () {        
                console.log("Locale started!");                                                     
            });
        return result;                                                                      
    });
};

In the working example, initLocale is returning a promise. However, in the non-working example, initLocale is returning the result of that promise. — andersuamar, Sep 29 '17 at 12:30
And how can I do to return the promise but executing the code inside? — Rober, Sep 29 '17 at 12:35
In the non-working example, your `initLocale` function does not `return` anything itself. — Bergi, Sep 29 '17 at 12:38
Do you want `initLocale` to wait for `tmhDynamicLocale.set`? — Bergi, Sep 29 '17 at 12:40

Mihai Alexandru-Ionut · Answer 1 · 2017-09-29T12:50:07.430

1

In the first example you've returned a promise.

In the second example you used return statement inside a callback function and that's a wrong thing.

The reason is that the return result line is executing before the .set asynchronous function is finished.

If you replace return result; with console.log(result), you will see that you received result before console.log("Locale started!");

Further more , .then method is used to handle the result of a promise, so you need to return a promise from you function.

edited Sep 29 '17 at 12:50

answered Sep 29 '17 at 12:34

Mihai Alexandru-Ionut

47,092
13
101
128

No, the solution is not a callback function. The solution is to return a promise, not changing the signature of `initLocale`. – Bergi Sep 29 '17 at 12:45
@Bergi, OP says `Can someone can help me to understand why this code is working and this code is not:`. My answer contains the correctly explanation why first works and second not. – Mihai Alexandru-Ionut Sep 29 '17 at 12:46
@Bergi, I changed to `alternative solution`. – Mihai Alexandru-Ionut Sep 29 '17 at 12:47
Yes, I don't understand either why you provided the correct explanation (even saying "*you need to return a promise from you function*") and then messed up the "solution" code. – Bergi Sep 29 '17 at 12:47
I mean `another solution` as a alternative. – Mihai Alexandru-Ionut Sep 29 '17 at 12:47
I'll upvote if you can also provide the code for the proper promise solution – Bergi Sep 29 '17 at 12:48
@Bergi, Maxim Shoustin already gives the solution. I will only keep the explanation. – Mihai Alexandru-Ionut Sep 29 '17 at 12:49

Maxim Shoustin · Accepted Answer · 2017-09-29T13:14:07.877

1

$translate.uses(language) returns Promise.

I need to do things here! For example call another Asynchronous function.

If you want to resolve results after tmhDynamicLocale.set(language) - use Promise chain:

var initLocale = function(language) {

  var data = {}; 

   return  $translate.uses(language).then(function(result) {
       data.result = result;            
        return tmhDynamicLocale.set(language);
      }).then(function () {  
           // do your stuff here      
           return data.result;                                                               
        });                                                                                         
};

Simple Demo Fiddle

edited Sep 29 '17 at 13:14

answered Sep 29 '17 at 12:35

Maxim Shoustin

77,483
27
203
225

1

Avoid the [deferred antipattern](https://stackoverflow.com/q/23803743/1048572?What-is-the-promise-construction-antipattern-and-how-to-avoid-it)! – Bergi Sep 29 '17 at 12:39
1

Yes, I've downvoted it because it's a bad practice (and as the linked topic explains, it doesn't even work for rejections). Just because the Angular docs don't list it as a bad practice doesn't mean that it's ok. Yes, one should not generically avoid deferreds, but one should avoid them *here*. – Bergi Sep 29 '17 at 12:44
@Bergi ok got you, changed, tnx – Maxim Shoustin Sep 29 '17 at 12:48
Actually that doesn't work because `initLocale` itself doesn't `return` anything now. Btw, the `$q.when` is superfluous – Bergi Sep 29 '17 at 12:49
Sorry guys, If I´m not wrong the code above is not working. @MaximShoustin – Rober Sep 29 '17 at 13:04
@Rober I fixed My response, also attached example where I use $timeout to simulate Promise – Maxim Shoustin Sep 29 '17 at 13:05
It works perfectly guys, except because there was a syntax duplicated }) that I removed. You are my heroes! Thanks! @MaximShoustin – Rober Sep 29 '17 at 13:13

Understanding promises in AngularJS

2 Answers2