.catch() – A promises talk for ember.js – Why should you care?



.catch() – A promises talk for ember.js – Why should you care?

0 0


ember-and-promises-lightning-talk


On Github ifo / ember-and-promises-lightning-talk

.catch()

A promises talk for ember.js

Created by Steve McCarthy - Displayed by REVEAL.JS

What is a promise?

A promise is the result of a task

A promise can be ...

Pending Settled Resolved Rejected

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

Example time!

basic promise example

promise.all() example

promise.catch() example

Questions?

.finally()

Thanks for listening