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.
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.
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
});
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.