在Ember中作出承诺

Question

I'm having some problems with composing promises in Ember (I guess). Following the Rookie mistake #1 from here I wrote:

return $.getJSON('config.json', (data) => {
  //some code here...
  return data;
}).then(() => {
  return this.get('store').findRecord('staffMember', 13);
}).then(record => {
  console.log(record);
});

As I understand the second then should be called only when the findRecord is resolved and it should show the record retrieved. Instead it shows the promise in the console. Why?

Answer 1

You are a victim of (a degree of) incompatibility between jQuery's and Ember's (RSVP) promises.

Here are the constraints :

• A jQuery promise will assimilate another jQuery promise.
• An Ember.RSVP promise will assimilate another Ember.RSVP promise.
• Ember.RSVP promises are Promises/A+ compatible and will assimilate jQuery promises.
• jQuery promises will not assimilate Ember.RSVP promises. A jQuery promise chain sees a returned A+ promise as data.

Here's the code from the question, with some annotations :

return $.getJSON('config.json', (data) => {
    //some code here...
    return data; // a return from a direct callback is meaningless (though it doesn't matter here as `data` is not used later downstream).
}) // at this point, you have a jQuery promise.
.then(() => { // this is the jQuery promise's .then().
    return this.get('store').findRecord('staffMember', 13); // this is an Ember.RSVP promise, which will be seen by the jQuery chain as data, not assimilated.
})
.then(record => {
    console.log(record); // oh dear, `record` is actually a jQuery promise.
});

Hence the symptom described in the question - a promise is logged in the console.

The fix is to ensure that the jQuery promise is returned into an Ember.RSVP chain, not the other way round.

Here are a couple of ways to code it, which differ primarily in syntax - both should work :

return Ember.RSVP.Promise.resolve() // start the chain with a resolved Ember.RSVP promise.
.then(function() {
    return $.getJSON('config.json'); // returned jQuery promise will be recognised as such and assimilated by the Ember.RSVP chain
})
.then(data => {
    //some code here ...
    return this.get('store').findRecord('staffMember', 13); // as expected, the returned RSVP promise will also be assimilated.
})
.then(record => {
    console.log(record);
});

Or, slightly more ecomomically :

return Ember.RSVP.Promise.resolve($.getJSON('config.json')) // assimilate jQuery promise into Ember.RSVP
.then(data => {
    //some code here ...
    return this.get('store').findRecord('staffMember', 13); // returned RSVP promise will also be assimilated
})
.then(record => {
    console.log(record);
});

Note: from jQuery 3.0, jQuery has undertaken to make its promises Promises/A+ compliant.