CODEWITHSUNDEEP
coffeescript
Darshan Sawardekar
Darshan Sawardekar

Reputation: 5075

Chaining Promises in Coffeescript

Is there a way to chain Promises together in Coffeescript. For example, consider the following javascript code,

return $.getJSON('/api/post.json')
  .then(function(response) {
    // do something
  })
  .then(function(response) {
    // do something
  })
  .then(null, function(err) {
    // do something
  });

Each of the then's is optional, and the final then needs to be returned by the function. Currently I am writing this in coffeescript as,

promise = $.getJSON('/api/post.json')
promise = promise.then (response) ->
  // do something

promise = promise.then (response) ->
  // do something

promise = promise.then null, (err) ->
  // do something

return promise

Is there a better way to do this? Thanks.

Upvotes: 30

Views: 20308

Answers (3)

Myrne Stol
Myrne Stol

Reputation: 11448

Ezekiel shows the right way, but it doesn't need the parentheses around the functions. Just do:

$.getJSON '/api/post.json' # As of CoffeeScript 1.7, you don't need the parentheses here either.
.then (response) ->
  # do something
  response # if you would not return anything, promise would be fulfilled with undefined
.then (response) ->
  # do something
  undefined # necessary to prevent empty function body
.then null, (err) ->
  # handle error

I think it's surprisingly clean. The one thing that's relatively messy is when you need to add onRejected and onFulfilled handlers at the same time.

Note: Last time I checked, this did not work in CoffeeScript Redux, but this was a few months ago.

Note 2: You need at least one line of actual code (i.e. not just a comment) in each function body for this to work. Typically, you will, so it's not a big issue.

Upvotes: 44

James Kyle
James Kyle

Reputation: 4178

This is my personal favorite way to write promises, with a little bit extra indentation

doSomething = () -> new RSVP.Promise (resolve, reject) ->
  if 1 is 1
    resolve 'Success'
  else
    reject 'Error'

doSomething()
.then (res) ->
      console.log 'Step 1 Success Handler'

    , (err) ->
      console.log 'Step 1 Error Handler'

.then (res) ->
      console.log 'Step 2 Success Handler'

.then (res) ->
      console.log 'Step 3 Success Handler'

    , (err) ->
      console.log 'Step 3 Error Handler'

Which compiles to:

var doSomething;

doSomething = function() {
  return new RSVP.Promise(function(resolve, reject) {
    if (1 === 1) {
      return resolve('Success');
    } else {
      return reject('Error');
    }
  });
};

doSomething().then(function(res) {
  return console.log('Step 1 Success Handler');
}, function(err) {
  return console.log('Step 1 Error Handler');
}).then(function(res) {
  return console.log('Step 2 Success Handler');
}).then(function(res) {
  return console.log('Step 3 Success Handler');
}, function(err) {
  return console.log('Step 3 Error Handler');
});

There are some instances where this works really well too:

step1Success = (res) -> console.log 'Step 1 Success Handler'
step1Error   = (err) -> console.log 'Step 1 Error Handler'

step2Success = (res) -> console.log 'Step 2 Success Handler'

step3Success = (res) -> console.log 'Step 3 Success Handler'
step3Error   = (err) -> console.log 'Step 3 Error Handler'

doSomething()
  .then(step1Success, step1Error)
  .then(step2Success)
  .then(step3Success, step3Error)

Tested on coffee-script v1.6.3

Upvotes: 14

Ezekiel Victor
Ezekiel Victor

Reputation: 3876

This is probably the best you'll do:

$.getJSON('/api/post.json')
    .then( (response) ->
      # do something
    ).then( (response) ->
      # do something
    ).then null, (err) ->
      # do something

Note the parentheses surrounding the then() arguments. Nothing earth shattering but hopefully this helps.

Upvotes: 4

Related Questions