jQuery: $.when deferred AJAX calls — one failed call cancels others

Question

I'm making multiple API calls, after which I want to load the combined results of each call:

$.when(
    $.get(localAPI, data, function(response) {
        globalStore.localShares = Number(response);
    }),

    $.get(facebookAPI, '', function(response){
        globalStore.facebookShares = Number(response[0].share_count);
    }),

    $.getJSON(pinterestAPI, {url: url}).done(function(response){
        globalStore.pinterestShares = Number(response.count);
    })
).always(function(){
   //Do stuff
});

If the $.get calls fail, the $.always callback function still executes.

But

If just one $.get call fails, it negates the actions of the previous calls.

So, if the first call fails, globalStore returns with two items. If the first call succeeds but the second fails, globalStore returns with only one item. And if the first two calls succeed but the last one fails, globalStore returns empty.

Is there any way around this?

Edit:

Yes, I have tried to handle fails within $.when like this:

$.when(
    $.get(mu30_ajax_frontend.ajaxurl, data, function(response) {
        globalStore.localShares = Number(response);
    }).fail(function(){
        globalStore.localShares = 0;
    }),

    $.get(facebookAPI, '', function(response){
        globalStore.facebookShares = Number(response[0].share_count);
    }).fail(function(){
        globalStore.facebookShares = 0;
    }),

    $.getJSON(pinterestAPI, {url: url}).done(function(response){
        globalStore.pinterestShares = Number(response.count);
    }).fail(function(){
        globalStore.pinterestShares = 0;
    })
).always(function(){
   //Do stuff
});

But I get the same result.

Have you tried handling the failures? `$.get().fail(function(err){})` — ZeroBased_IX, Feb 10 '16 at 19:52
Yes, I just tried that. I added the code above. Still get the same exact issue. — ibhhvc, Feb 10 '16 at 19:57
This sounds like a duplicate of [$.Deferred: How to detect when every promise has been executed](http://stackoverflow.com/q/19177087/1048572), but I'm not sure what exact behaviour you do expect from your "way around". — Bergi, Feb 17 '16 at 02:31

score 5 · Answer 1 · answered Feb 10 '16 at 20:02

There's no way around this when using $.when that way, if one request fails, the entire chain fails.

You'd have to roll your own instead, using deferreds to know when the calls are all completed, and always successfully resolving etc.

var defs = [new $.Deferred(), new $.Deferred(), new $.Deferred()];

$.get(localAPI, data, function(response) {
    globalStore.localShares = Number(response);
    defs[0].resolve(true);
}).fail(defs[0].resolve);

$.get(facebookAPI, '', function(response){
    globalStore.facebookShares = Number(response[0].share_count);
    defs[1].resolve(true);
}).fail(defs[1].resolve);

$.getJSON(pinterestAPI, {url: url}).done(function(response){
    globalStore.pinterestShares = Number(response.count);
    defs[2].resolve(true);
}).fail(defs[2].resolve);

$.when.apply($, defs).then(function(result) {
    // result is an array, any true value is a successful request "[true, true, true]"
});

written verbosely, this could be prettied up with some functions and loops etc.

You should [avoid the deferred antipattern](http://stackoverflow.com/q/23803743/1048572)! Even in jQuery, which does not have `catch`, you can do `.then(null, function(err) { return $.Deferred().resolve("don't care"); })` — Bergi, Feb 17 '16 at 02:33

score 0 · Answer 2 · answered Feb 10 '16 at 20:18

I think the solution I needed was actually a simple one. I didn't care about success or failure, I just wanted to know when ajax was done. So:

$.get(mu30_ajax_frontend.ajaxurl, data, function(response) {
    globalStore.localShares = Number(response);
});

$.get(facebookAPI, '', function(response){
    globalStore.facebookShares = Number(response[0].share_count);
});

$.getJSON(pinterestAPI, {url: url}).done(function(response){
    globalStore.pinterestShares = Number(response.count);
});

$(document).ajaxStop(function(){
   //Do stuff
});

score 0 · Answer 3 · answered Feb 17 '16 at 01:46

From the jQuery $.when() docs (emphasis mine):

In the case where multiple Deferred objects are passed to jQuery.when(), the method returns the Promise from a new "master" Deferred object that tracks the aggregate state of all the Deferreds it has been passed. The method will resolve its master Deferred as soon as all the Deferreds resolve, or reject the master Deferred as soon as one of the Deferreds is rejected.

So, yes jQuery.when will immediately fail if one of the passed promises is rejected/fails.

jQuery: $.when deferred AJAX calls — one failed call cancels others

3 Answers3