How to handle fail of $.when promise?

Question

I'm not understanding how $.when works during the fail when passing multiple AJAX calls. If one fails, does the fail callback trigger? Also, what is the parameter of the fail, one per ajax or is it one fail shared for all?

$.when(
    $.ajax('/url1'),
    $.ajax('/url2'))
   .done(function (resp1, resp2) {

    }).fail(function (??) {

    });

Answer 1

This should be easy enough to check right?

var d1 = $.Deferred(), d2 = $.Deferred();

$.when(d1, d2)
   .fail(function (a, b) { 
      console.log(a, b); 
   });

d2.reject("hi!");

The output is hi! undefined. So only one argument gets passed.

http://jsfiddle.net/22b3L/

Answer 2

.then() actually takes up to three arguments (success, fail, progress). You can either use .fail() as noted in other answers, or you can do something like:

$.when(async).then(function success(resp) {
        console.log('success');
    }, function fail(resp) {
        console.log('fail');
    });

Answer 3

When any of the promises are rejected the final fail will be called. If you'd like to do something different for each one, you could try something like this:

$.when(
    $.ajax('/url1').fail(function () { console.dir('fail 1'); }),
    $.ajax('/url2').fail(function () { console.dir('fail 2'); }))
.done(function (resp1, resp2) {

}).fail(function () {
    console.dir('fail any');
});

Fail any will be called immediately after one of the ajax requests failed, so other request-specific fails might be called afterwards.

Answer 4

I was working through something similar and thought it might be helpful to someone.

A CodePen playground with $.when

 var d1 = $.Deferred().fail(function(a){ console.log('on fail 1', a) }), 
    d2 = $.Deferred().fail(function(a){ console.log('on fail 2', a) }),
    d3 = $.Deferred().fail(function(a){ console.log('on fail 3', a) });
$.when(d1, d2, d3)
.then(function (a, b, c){
  console.log('then: ', a, b, c);
})
.fail(function (a, b, c) { 
  // only reports the first one that failed
  console.log('fail: ', a, b, c); 
})
.always(function(a, b, c){
  console.log('always: ', a, b, c);
});
d1.resolve("d1!");
d2.reject("d2!");
d3.reject("d3!");

A way to 'recover' from 1 failed in the array of deferreds

'use strict';
var getConfigRequestDef = $.Deferred();
var getConfigDef = $.Deferred();
var getStatusRequestDef = $.Deferred();
var getStatusDef = $.Deferred();
getConfigRequestDef.then(function (cfg) {
    return getConfigDef.resolve(cfg);
}, function (c) {
    c.hasError = true;
    getConfigDef.resolve(c);
});
getStatusRequestDef.then(function (status) {
    return getStatusDef.resolve(status);
}, function (s) {
    s.hasError = true;
    getStatusDef.resolve(s);
});
var results = $.when(getConfigDef, getStatusDef).then(function (config, status) {
    console.log('The when\'s then: ', JSON.stringify(config), JSON.stringify(status));
});
var cfg = {
    id: 10,
    type: 'config',
    hasError: false
};
var statusObj = {
    id: 30,
    type: 'status',
    hasError: false
};
getConfigRequestDef.reject(cfg);
getStatusRequestDef.reject(statusObj);