I am trying to use javascript promises to perform multi-step asynchronous operations in lightning components. Unfortuantely I am stuck with the problem where the promise behaves incorrectly within $A.getCallback context. Here is a simplified app and js controller to demostrate the problem.
I have a simple app definition with a string attribute that defaults to "superman".
<aura:application >
<aura:handler name="init" value="{!this}" action="{!c.init}"/>
<aura:attribute name="myatt" type="String" required="false" default="superman" access="private" />
</aura:application>
Associated controller.js code uses Promises:
({
init : function( cmp, evt, h) {
Promise.resolve(1).then($A.getCallback(function(val) {
console.log('val %o', val);
return new Promise($A.getCallback(function(done, err){
setTimeout($A.getCallback(function(){
// console.log('now!');
done('yo ' + cmp.get('v.myatt'));
}), 2000);
}));
// return 'yo ' + cmp.get('v.myatt');
})).then($A.getCallback(function(res){
console.log('Result: %o', res);
}));
}
})
When locker service is disabled, the console log outputs an expected output (notice that Result appears after 2 seconds):
val 1
Result: "yo superman"
However, when Locker Service is enabled, the Result becomes javascript Object with no useful attributes that is returned immediatly:
val 1
Result: Object
(When object is expanded)
-> $then$: function ()
-> __proto__: Object
I would really like to utilise the power of promises as it's a nightmare to use callbacks all the time. Any ideas?
Original question on sf dev forum, posting here as received no answer so far: https://developer.salesforce.com/forums/ForumsMain?id=9060G000000XebSQAS