Why should you care?

Models!

Good

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return $.get("https://my-api.example.com/ember-model", function(data) {
      // yes this "works"
    });
  }
});
            

Gooder

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return $.get("https://my-api.example.com/ember-model");
  }
});
            

Gooderer

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return new RSVP.Promise(function(resolve, reject) {
      $.get("https://my-api.example.com/ember-model")
      .then(function(data) {
        resolve(data);
      })
      .fail(function(error) {
        reject(error);
      });
    });
  }
});
            

Goodererest

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return new RSVP.Promise(function(resolve, reject) {
      $.get("https://my-api.example.com/ember-model")
      .then(resolve).fail(reject);
    });
  }
});
            

So what if you want to get two things?

jQuery it

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return $.get("https://my-api.example.com/ember-model")
    .then(function(data) {
      return $.get("https://my-api.example.com/ember-model2")
      .then(function(data2) {
        return {data: data, data2: data2};
      });
    });
  }
});
            

Honestly not even sure if this works

Promise.all!!!

Promise.all

App.IndexRoute = Ember.Route.extend({
  model: function() {
    var model1 = new RSVP.Promise(function(resolve, reject) {
      return $.get("https://my-api.example.com/ember-model").then(resolve).fail(reject);
    });
    var model2 = new RSVP.Promise(function(resolve, reject) {
      return $.get("https://my-api.example.com/ember-model2").then(resolve).fail(reject);
    });

    return RSVP.Promise.all([model1, model2]); // it combines them!
  }
});
            

Yes, it probably works

So what if something goes wrong?

Handle it with .catch()!

.catch()

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return new RSVP.Promise(function(resolve, reject) {
      $.get("https://my-api.example.com/ember-model")
      .then(resolve).fail(reject);
    }).catch(function(error) {
      // the defaults
      return [
        "model 1",
        "model 2"
      ];
    });
  }
});
            

Even better

Yes, you CAN .catch() a Promise.all()

Promise.all .catch

App.IndexRoute = Ember.Route.extend({
  model: function() {
    var model1 = new RSVP.Promise(function(resolve, reject) {
      return $.get("https://my-api.example.com/ember-model").then(resolve).fail(reject);
    });
    var model2 = new RSVP.Promise(function(resolve, reject) {
      return $.get("https://my-api.example.com/ember-model2").then(resolve).fail(reject);
    });

    return RSVP.Promise.all([model1, model2])
    .catch(function(error) {
      console.warn(error); // I live on the edge
      return {model1: "I still got", model2: "your back"};
    });
  }
});
            

Again, it probably works ... maybe