How to bubble up a rejected promise when using Ember.PromiseProxyMixin

Question

I am using Ember's PromiseProxyMixin with AJAX data calls and Ember RSVP Promises. Rather than incorporating error-handling in each route/template, I would like to bubble a rejected promise up to an error handler in the Application route as follows:

export default Ember.Route.extend({
    actions: {
        error: function(error, transition) {
            return this.transitionTo('error');
            return false;
        }
    }
});

Currently, if a promise is rejected, the rejected promise doesn't appear bubble up to the Application route (is this because the PromiseProxyMixin attaches to a promise's .fail() function and prevents further bubbling? If so, is there any way of continuing the bubbling?)

Is it possible to use the PromiseProxyMixin and also allow the rejected promise to bubble up to the Application route?

Answer 1

I'm not sure that it will solve your problem, but we did encounter differences in Es6 promises and jQuery promises, therefore we convert all jQuery promises to Es6 by default using the following initializer. We also convert other "thennables" using the when method below:

import Ember from 'ember';

function initialize() {
  var $ajax = Ember.$.ajax;
  Ember.RSVP.when = function(promise, label) {
    return new Ember.RSVP.Promise(promise.then.bind(promise), label);
  };
  return Ember.$.ajax = function() {
    return Ember.RSVP.when($ajax.apply(Ember.$, arguments), '$.ajax');
  };
};

var PromiseAdapterInitializer = {
  name: 'promise-adapter',
  initialize: initialize
};

export {initialize};
export default PromiseAdapterInitializer;