Question

I’m trying to implement the folowing scenario, using JQuery deferred, without much luck.

What parts of the deferred api would you use, and how would you structure your calls to achieve the following:

1st ajax callA to serviceA retrieve a list of Ids

wait until this call returns

then n ajax calls to serviceB, each call using a using an Id from the list returned by callA

wait until all serviceB calls have returned

then a final ajax call to serviceC

Answer 1

You could do like this (more or less pseudocode):

(function() {
    // new scope
    var data = []; // the ids coming back from serviceA

    var deferredA = callToServiceA(data); // has to add the ids to data

    deferredA.done(function() { // if callToServiceA successful...
        var deferredBs = [];

        for i in data {
            deferredBs.push(callToServiceB(...));
        }

        $.when.apply($, deferredBs).then(callToServiceC); 
    });

}());

The callToServiceX function should return the promise object returned by $.ajax.

There might be a “cleaner” solution than having data in a shared scope, with resolve, but the setup would be a bit more difficult (and not necessarily more readable).