Databases
StackOverflow2013
Postsdbo
POAsynchronous JavaScript - Callbacks vs Deferred/Promise
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAsynchronous JavaScript - Callbacks vs Deferred/Promise
    primarykey
    data
    text
    <blockquote> <p><strong>Possible Duplicate:</strong><br> <a href="https://stackoverflow.com/questions/6801283/what-are-the-differences-between-deferred-promise-and-future-in-javascript">What are the differences between Deferred, Promise and Future in Javascript?</a> </p> </blockquote> <p>Lately I've been making an effort to improve the quality of my JavaScript applications.</p> <p>One pattern I've adopted is to use a separate "data context" object to load data for my application (previously I was doing this directly in my view models).</p> <p>The following example returns data that is initialized on the client:</p> <pre><code>var mockData = (function($, undefined) { var fruit = [ "apple", "orange", "banana", "pear" ]; var getFruit = function() { return fruit; }; return { getFruit: getFruit } })(jQuery); </code></pre> <p>In most cases we'll be loading data from the server so we can't return an immediate response. It seems I have two options for how we handle this in our API:</p> <ol> <li>Using a callback</li> <li>Returning a <a href="http://api.jquery.com/promise/" rel="nofollow noreferrer">promise</a>.</li> </ol> <p>Previously I'd always used the callback approach:</p> <pre><code>var getFruit = function(onFruitReady) { onFruitReady(fruit); }; // ... var FruitModel = function(dataContext, $) { return { render: function() { dataContext.getFruit(function(fruit) { // do something with fruit }); } }; }; </code></pre> <p>However, I can see how it's possible to end up in callback hell, especially when building complex JavaScript applications.</p> <p>Then I came across the Promises design pattern. Instead of requiring the caller to supply a callback, I instead return a "promise" that can be observed:</p> <pre><code>var getFruit = function() { return $.Deferred().resolve(fruit).promise(); }; // ... dataContext.getFruit().then(function(fruit) { // do something with fruit }); </code></pre> <p>I can see obvious benefits of using this pattern, especially since I can <code>wait</code> on multiple deferred objects which could be very useful when loading initialization data for a single page application.</p> <p>However, I'm keen to understand the pros and cons of each pattern before I start to use either in anger. I'm also interested in whether this is the direction other libraries are going in. It seems to be the case with jQuery.</p> <p>Here's a <a href="http://jsfiddle.net/benfosterdev/yenGc/3/" rel="nofollow noreferrer">link</a> to the fiddle I'm using for testing.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USBen Foster
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTDuplicate
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POAsynchronous JavaScript - Callbacks vs Deferred/Promise
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POAsynchronous JavaScript - Callbacks vs Deferred/Promise
      1. USmiku
      1. VTFavorite
    3. VO
      singulars
      1. POAsynchronous JavaScript - Callbacks vs Deferred/Promise
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWell good news: the jQuery ajax APIs *already* return Promises!
      singulars
      1. POAsynchronous JavaScript - Callbacks vs Deferred/Promise
      1. USPointy
    2. CO[Read up on the mechanism here.](http://api.jquery.com/jQuery.ajax/#jqXHR)
      singulars
      1. POAsynchronous JavaScript - Callbacks vs Deferred/Promise
      1. USPointy
    3. COYes, this is how I came across the pattern in the first place as I was looking for a way to abstract my ajax calls.
      singulars
      1. POAsynchronous JavaScript - Callbacks vs Deferred/Promise
      1. USBen Foster
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload