Trying to understand Ember JS promises

Question

I have been trying to work on a code example to get my head around promises. But I can't seem to figure out how to deal with the callbacks and get the "thenable" value later.

Here are two relevant JSBin examples I am working on. Written in verbose style to emulate baking cookies.

Ember JS without async

http://jsbin.com/iSacev/1/edit

purely synchronous example to show the basic behavior (deliberately using basic object model)

Ember JS with async and promises

http://jsbin.com/udeXoSE/1/edit

Attempt to extend the first example and implement method where things are done with a delay and returns a fulfilled promise object later in time.

Concepts attempting to understand:

• How to properly handle promises and specifically Ember.RSVP.Promise and get an object later.
• How to use the Ember.run.later method instead of setTimeout

Kentonkentucky

Answer 1

How to properly handle promises and specifically Ember.RSVP.Promise and get an object later

Seems like you are close to having this figured out, just had to make some minor changes to your jsbin to get things working:

First, instead of pushing the promise onto your array you should push the value that the promise passes to the then callback. Really in this case you don't need that promise object at all. So:

// Call the then function on the promise
App.cookieSlowBake(cookie).then(function(value) {
  alert("Your slow baked cookies are ready to eat");
  App.CookieStore.pushObject(value);
}, function(value) {
  // failure
  alert("Something happened with the oven sorry no cookies.");
});

Second change was to fix a bug in cookieSlowBake. In the original version the promise was being rejected because of a conditional test that would always evaluate to false since it was not in the Ember.run.later callback. The new version gets rid of the conditional and just resolves the promise when the callback is done.

var bakedCookiePromise = new Ember.RSVP.Promise(function(resolve, reject){
  var bakeTime = 2000; // milliseconds
  var bakedCookie = false;
  Ember.run.later(cookieDough, function() {
    // code here will execute within a RunLoop in about the bakeTime with this == cookieDough
    cookieDough.set('deliveryStatus', "cookie delivered later after baking " + bakeTime);
    bakedCookie = true;  
    resolve(cookieDough);
  }, bakeTime);
});

See working jsbin here: http://jsbin.com/ebOBEk/1/edit

How to use the Ember.run.later method instead of setTimeout

They are basically the same thing. You seem to be using it correctly.

Sheeree

Mike thanks so much. Your example makes sense. So "value" is the fulfilled promise and I just have to handle it. However what is confusing to me is how to handle the thennable with another function. e.g. why don't these two examples work jsbin.com/omIZeq/1/edit using "this" jsbin.com/omIZeq/2/edit using "value" – Kentonkentucky

Glad that helped. So to handle thennable with a fx just pass that fx as an argument. Problem with the the first jsbin is that instead of passing fx as arg it is executing the fx and passing its result as an arg. So instead of cookiePromise.then(App.cookieDeliveredSuccessfully(this), App.cookieNotDelivered(this)); it should be cookiePromise.then(App.cookieDeliveredSuccessfully, App.cookieNotDelivered); – Sheeree

Ahhhh ok. So I assume the internal implementation of the then function passes the argument behind the scenes. I guess because I didn't see something between curly braces, it wasn't there. Now to experiment with chaining multiple promises. Thanks! – Kentonkentucky

For anyone else that needs some more explanation and examples of Promises and Ember implmentations, this talk is fantastic -> youtube.com/… – Cognomen