🔊 jQuery -

Promises

You can tackle with asynchronous JavaScript code with callbacks, promises or events. This note contains examples how to use promises.

Promises allow chaining AJAX requests.

var promise1 = $.get( '/ajax/translate', { key: 'word_username' } );

var promise2 = promise1.pipe(function(result) {
  console.log('Promise 1 gave... '+result);
  return $.get( '/ajax/translate', {key: result+'e'} );
});

promise2.done(function(result) {
  console.log('Promise 2 gave... '+result);
});

Promises allow parallel AJAX requests.

var multiResult = {};

var promise1 = $.get(
  '/ajax/translate',
  { key: 'word_username' },
  function(result) {
    multiResult.one = result;
  }
);

var promise2 = $.get(
  '/ajax/translate',
  { key: 'word_password' },
  function(result) {
    multiResult.two = result;
  }
);

$.when(promise1, promise2).done(function() {
  console.log(multiResult);
});

You can also create your own promises using jQuery.

var Api = function() {
  // Constructor
};
Api.prototype.method = function() {
  console.log('method()');
}
Api.prototype.doAsyncStuff = function() {

  console.log('Doing some async stuff...');
  var deferred = $.Deferred();

  setTimeout(
    function() {
      deferred.resolve('some data');
    },
    500
  );

  // If the async stuff fails, you should do deferred.rejected(error);

  return deferred.promise();
};

var api = new Api();
api.doAsyncStuff().done(function(data) {
  console.log('done with ' + data);
  api.method();
});

Some more advanced usage examples on promise functionalities that I've made a while back.

/**************************************************************************
 * Get translations by promise.
 */

// Calling the code
var promise = myLibrary.translation.get( 'word_password');

// Promise
promise.done(function(translation){
  console.log('Yey! You completed!');
  console.log(translation);
});
promise.always(function(){
  console.log('Thanks, always as you promised, even if failed!');
});

/**************************************************************************
 * Get templates by promise.
 */

var promise = myLibrary.template.get('test');

promise.done( function(tmpl) {
  console.log('done by promise ');
  console.log(tmpl({test: 'A STRING!'}));
});

promise.fail( function() {
  console.log('fail by promise');
});

promise.always( function() {
  console.log('always by promise');
});

/**************************************************************************
 * Set 2 HTML templates.
 * Set 2 translations.
 */

myLibrary.translation.set({
  'word_one': 'YKSI',
  'word_two': 'KAKSI'
});
myLibrary.template.set({
  'template_one': '<div> TEMPLATE ONE: {{value}}<div>',
  'template_two': '<div> TEMPLATE TWO: {{value}}<div>'
});

/**************************************************************************
 * Get 1 translation.
 * Get 2 HTML templates.
 * Run function after all are available.
 */

var promise1 = myLibrary.translation.get('word_password');
var promise2 = myLibrary.template.get('test');
var promise3 = myLibrary.template.get('test_two');

var cauldron = {};
promise1.done( function(translation) { cauldron.password = translation } );
promise2.done( function(template1) { cauldron.template1 = template1 } );
promise3.done( function(template2) { cauldron.template2 = template2 } );

$.when(promise1, promise2, promise3).then( function() {
  console.log( cauldron.template1({test: cauldron.password}) )
  console.log( cauldron.template2({test: cauldron.password}) )
});

/**************************************************************************
 * Get 2 HTML templates.
 * Get 2 translations.
 * Run function after all are available.
 */

var promise1 = myLibrary.translation.get('word_one');
var promise2 = myLibrary.translation.get('word_two');
var promise3 = myLibrary.template.get('template_one');
var promise4 = myLibrary.template.get('template_two');

var cauldron = {};
promise1.done( function(translation) { cauldron.aaa = translation } );
promise2.done( function(translation) { cauldron.bbb = translation } );
promise3.done( function(template) { cauldron.ccc = template } );
promise4.done( function(template) { cauldron.ddd = template } );

$.when(promise1, promise2, promise3, promise4).then( function() {
  console.log( cauldron.ccc({value: cauldron.bbb}) );
  console.log( cauldron.ddd({value: cauldron.aaa}) );
});