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 = {};

          


        

Answer 1

Hopefully this will give a better idea of how to pass data from one call to the next.

First a version of callWebService() that differs in that :

• it doesn't accept a callback
• it returns the jqXHR object returned by $.ajax()

function callWebService (uri, filter) {
    var data = {};
    if (filter && filter != '') {
        data.$filter = filter;
    }
    return jQuery.ajax({
        url: '/_api/lists/' + uri + '/items',
        data: data,
        dataType: 'json'
    });
}

Now your four "get..." functions, which differ in that :

• the functions accept a filter parameter
• the functions return a promise
• the callback now appears as a parameter passed to a chained .then() rather than passing it to callWebService().
• the callback does whatever is necessary with the returned data and, importantly, returns it, thus making the data available further down a promise chain wherever getInitialData(), getGreenData() etc are called.

function getInitialData (filter) {
    return callWebService("InitialData", filter).then(function (data) {
        //do stuff with initial data
        return data;
    });
}
function getGreenData (filter) {
    return callWebService("GreenData", filter).then(function (data) {
        //do stuff with green data
        return data;
    });
}
function getRedData (filter) {
    return callWebService("RedData", filter).then(function (data) {
        //do stuff with red data
        return data;
    });
}
function getFinalData (filter) {
    return callWebService("FinalData", filter).then(function (data) {
        //do stuff with final data
        return data;
    });
}

Finally the master routine that controls the sequencing and data flow.

function getAllSortsOfDependentData() {
    return getInitialData().then(function (initialData) {
        var filter1 = initialData...;//some property of initialData (this may be several lines of code)
        var filter2 = initialData...;//some other property of initialData (this may be several lines of code)
        var greenPromise = getGreenData(filter1);
        var redPromise = getRedData(filter2);
        return $.when(greenPromise, redPromise).then(function (greenData, redData) {
            var filter3 = greenData...;//some property of greenData (this may be several lines of code)
            var filter4 = redData...;//some property of redData (this may be several lines of code)
            return getFinalData(filter3, filter4).then(function(finalData) {
                //Now a summary object can be returned.
                //This is possible due to initialData/greenData/redData being accessible from closures formed by outer functions.
                return {
                    initialData: initialData,
                    greenData: greenData,
                    redData: redData,
                    finalData: finalData
                };
            });
        });
    });
}

getAllSortsOfDependentData() can now be called as follows, with the summary data available in the callback of a chained .then() :

getAllSortsOfDependentData().then(function(dataObject) {
    //Everything above is complete.
    //If required, all the fetched data is available here as properties of `dataObject`
    //dataObject.initialData
    //dataObject.greenData
    //dataObject.redData
    //dataObject.finalData
});

That's the basics. In almost every function, various refinements are possible.