How to use Promises in RactiveJS?

Question

Although there is an example in Ractive docs, I am a starter with promises and I don't understand the mentioned example:

var Promise = Ractive.Promise;

var p = new Promise( function ( fulfil, reject ) {
  doSomethingAsync( function ( error, result ) {
    if ( error ) {
      return reject( error );
    }

    fulfil( result );
  });
});

How can I use Ractive's implementation to run some functions asynchronously?

Edit: An use case example is when I have, in the same function, synchronous and asynchronous operations and I need to return a Promise when all of these operations where processed.

Please ask a more specific function. What "some functions" do you want/need to implement? What problems did you meet? Show us your attempt. If this is a question about understanding, please put the respective example in your question (there are multiple ones on the linked page!), and explain minutely what you understand and what not. — Bergi, Apr 06 '15 at 15:58
Maybe you'll want to start with [these rules of thumb](http://stackoverflow.com/a/25756564/1048572) (more a design question rather than explaining the `Promise` constructor). Usually you don't combine synchronous with asynchronous functions. You have functions returning promises (async), and then chain them. Can you please give a concrete example of which functions you have and want to use? Maybe a code snippet in callback style (no promises yet)? — Bergi, Apr 06 '15 at 19:57

score 3 · Accepted Answer · answered Apr 06 '15 at 21:13

This is more a question about promises than about Ractive, so this MDN article would be worth a read, though it's a bit heavy.

Basically though, if you want to wait until several operations have finished, use Promise.all:

var ready = Promise.all([
  getJSON( '/data.json' ), // async (returns a promise)
  domReady(),              // async
  reticulateSplines()      // sync
]);

getJSON and domReady will be executed simultaneously. So will reticulateSplines, not that it matters since it's synchronous. The value of ready is now a promise that will fulfil with an array containing the results of those three operations:

ready.then( function ( values ) {
  var data     = values[0];
  var document = values[1];
  var splines  = values[2];
  // some code happens
}).catch( function ( err ) {
  // if something went wrong with any of those three
  // functions (e.g. couldn't find data.json), we'll
  // end up here
});

If you're transpiling your code with something like babel, you can also use destructuring:

ready.then( ([ data, document, splines ]) => {
  // some code happens
}).catch( err => {
  // handle error
});

Another useful function if you're dealing with maybe-sync-maybe-async stuff (though it really is better to avoid that sort of thing) is Promise.resolve:

function crazyTown () {
  if ( Math.random() < 0.5 ) {
    return 'sync!';
  } else {
    return new Promise( function ( fulfil, reject ) {
      setTimeout( function () {
        fulfil( 'async!' );
      }, 500 );
    });
  }
}

Promise.resolve( crazyTown() ).then( function ( type ) {
  console.log( type );
});

If your browser supports promises natively, Ractive will use those (i.e. Ractive.Promise === window.Promise) - if not, it uses its own spec-compliant implementation.

How to use Promises in RactiveJS?

1 Answers1