Search jQuery

jQuery Forum

Screen name:
jaubourg
About Me:
jQuery Core Team Member
Email ID: j@ubourg.net

jaubourg's Profile

1 Posts

31 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

A Case for Deferred.chain
[15Replies]
- 04-Apr-2011 01:21 PM
- Forum: Developing jQuery Core
As of today, Deferreds are awesome to deal with asynchronous tasks. However, they lack a mean to filter/chain tasks without cumbersome code.

For instance, let's say you want to chain two ajax requests. Here is how you'd do it now:

$.ajax( url ).done(function( response ) {
  $.ajax( reponse.url ).done( callback );
});

It gets a bit trickier when you need to give a promise for the end of the whole task in order to decouple the code and not have to provide the callback when the request is initiated (which is the crux of Deferred):

function chainedAjax( url ) {
  return $.Deferred(function( defer ) {
  $.ajax( url ).done(function( response ) {
  $.ajax( reponse.url ).then( defer.resolve, defer.reject );
  }).fail( defer.reject );
  }).promise();
}

You have to create a deferred to wait for the second ajax call and handle all the resolve and reject plumbery by hand... you can imagine how complex it could get with more and more chained requests.

With deferred.chain, here is how it would be coded:

function chainedAjax( url, callback ) {
  return $.ajax( url ).chain(function( response ) {
  return $.ajax( response.url );
  });
}

It's much more direct and to the point and if you need to chain more, just add chain statements and you'll get the proper promise returned.

Just like when, chain can also deal with non-observable values, so it can be used to filter responses. This comes in handy when dealing with ajax requests in a when statement:

function simpleAjax( url, options ) {
  return $.ajax( url, options ).chain(function( response ) {
  return response;
  });
}

$.when( simpleAjax(...), simpleAjax(...) ).done(function( response1, response2) {
  // response1 and response2 are no longer arrays
   // since the filtered promise is just the actual
   // ajax response, not the reponse with the jqXHR
   // object and the status like a normal ajax call
});

You can also use the filtering ability to deliver promises that are resolved with the data that is of interest to each part of the application:

var request = $.ajax( url, options ),
  status = request.chain(function( response ) {
  return response.status;
  }),
  data = request.chain(function( response ) {
  return response.data;
  });

status.done(function( responseStatus ) {
  // Deal with the status
});

data.done(function( responseData ) {
  // Deal with the data
});

This helps completely decouple portions of an app by hiding the actual data structure of the response from parts that don't need to know about it. It also helps refactoring: it's pretty easy now to change the logic into two separate ajax calls:

status = $.ajax( urlStatus, optionsStatus ).chain(function( response ) {
  return response;
});

data = $.ajax( urlData, optionsData ).chain(function( response ) {
  return response;
});

Or even, to have dependencies between ajax calls:

status = $.ajax( urlStatus, options ).chain(function( response ) {
  return response;
});

data = status.chain(function( status ) {
  return status === "OK" ? $.ajax( urlData, optionsData ) : null;
}).chain(function( response ) {
  return response;
});

As you can see, Deferred.chain is a very useful method and it's actually pretty small too ;)

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend