jQuery ajax call chaining with multiple dependencies

Question

I don't quite understand magic deferred objects with jQuery. Assume the following code:

function callWebService(uri, filter, callback)
{
  var data = {};

  if (filter && filter != '')
    data['$filter'] = filter;

  jQuery.ajax({
    url: '/_api/lists/' + uri + '/items',
    data: data,
    success: callback,
    dataType: 'json'
  });
}

function getInitialData() {
  callWebService("InitialData", "", function (data) {
    //do stuff with data
  });
}

function getGreenData() {
  callWebService("GreenData", "filter from InitialData", function (data) {
    //do stuff with data
  });
}

function getRedData() {
  callWebService("RedData", "filter from InitialData", function (data) {
    //do stuff with data
  });
}

function getFinalData() {
  callWebService("FinalData", "filter from RedData & GreenData", function (data) {
    //do stuff with data
  });
}

The order I want to do things is like so - in the end I will call four webservices whereas the calls depend on each other (one long chain):

1. Call getInitialData
2. Call getGreenData with dependency on getInitialData
3. Call getRedData with dependency on getInitialData
4. Call getFinalData with dependencies on getGreenData and getRedData

As you can tell 2 & 3 could happen simultaneously. I'm thinking I can use jQuery.when() (or resolve?), I just don't know how to apply it here. I think I need to rework the functions to always return the ajax object?

Pseude-code would look like this:

getInitialData().then(getGreenData, getRedData).then(getFinalData)

Answer 1

$.ajax returns a jQuery promise. You can then call then on that promise to chain completion to a function. The ajax data is passed as the promise parameter to any final callback function. That is because $.ajax "promises to return the Ajax data".

If you follow the same pattern for all your functions you can chain everything as you wanted. By not calling the functions, or adding anonymous callbacks, it simply uses the resulting promises from each function call and combines them together.

Something like:

function CallWebService (uri, filter)
{
  var data = {};

  if (filter && filter != '')
    data['$filter'] = filter;

  return jQuery.ajax({
    url: '/_api/lists/' + uri + '/items',
    data: data,
    dataType: 'json'
  });
}

function getGreenData() {
  return CallWebService("GreenData", "filter from InitialData");
}

function getRedData() {
  return CallWebService("RedData", "filter from InitialData");
}

function GetInitialData() {
    return CallWebService("InitialData", "").then(GetGreenData);
}

// Fetch green data then red data sequentially
function GetFinalData () {
    return getGreenData().then(getRedData);
}

// Call the final one
GetFinalData().done(function(greendata, reddata){
     Alert("all done!");
});

To run promises in parallel, evaluate the functions immediately and let the resulting promises combine with $.when:

e.g.

// Fetch green data and red data in parallel
function GetFinalData () {
    return $.when(getGreenData(), getRedData());
}