Asynchronous JavaScript - Callbacks Against Deferred / Promises

Question

Possible duplicate:
What are the differences between deferred, promises, and future ones in Javascript?

Recently, I have been making efforts to improve the quality of my JavaScript applications.

One template that I have adopted is to use a separate “data context” object to load data for my application (previously I did this directly in view models).

The following example returns data that is initialized by the client:

var mockData = (function($, undefined) { var fruit = [ "apple", "orange", "banana", "pear" ]; var getFruit = function() { return fruit; }; return { getFruit: getFruit } })(jQuery); 

In most cases, we will download data from the server so that we cannot return an immediate response. It seems that I have two options for how we deal with this in our API:

• Using callback
• Return promise .

I always used the callback approach before:

 var getFruit = function(onFruitReady) { onFruitReady(fruit); }; // ... var FruitModel = function(dataContext, $) { return { render: function() { dataContext.getFruit(function(fruit) { // do something with fruit }); } }; }; 

However, I see how you can end up in the opposite hell, especially when creating complex JavaScript applications.

Then I came across a Promises design template. Instead of requiring the caller to call the callback, I instead return a “promise” that can be observed:

 var getFruit = function() { return $.Deferred().resolve(fruit).promise(); }; // ... dataContext.getFruit().then(function(fruit) { // do something with fruit }); 

I see the obvious advantages of using this template, especially since I can wait on several pending objects, which can be very useful when loading initialization data for a single-page application.

However, I really want to understand the pros and cons of each template before I start using it either in anger. I am also interested in whether this is a direction that other libraries are entering. This is similar to jQuery.

Here is a link to the script that I use for testing.

Answer 1

Promises also rely on callbacks behind the scenes, so it's really not one against the other.

The advantage of callbacks is that they are easy to implement using regular JavaScript (for example, in ajax calls).

Promises requires an extra level of abstraction, which usually means that you will rely on the library (no problem in your case, since you are already using jQuery). They are ideal when you use multiple asynchronous calls in parallel.

Answer 2

From reading the jQuery docs that @Pointy is associated with, it seems that the difference is that the delayed code API allows you to specify more than one function that will be called when your request is complete:

As with jQuery 1.5, error (failure), success (completed), and complete (always, with jQuery 1.6) callbacks are the first in the first queue management order. This means that you can assign multiple callbacks for each hook. See Methods of deferred objects that are embedded inside these $ .ajax () callback hooks.

See also: deferred.then ()