Does jquery $.when().done() wait for all $.ajax().done()'s to complete?

Question

I am pretty new to promises and am trying to be sure I have the right approach. My question is, when using $.when with a list of $.ajax calls, does the .done of the $.when wait to execute until all the .done 's of all $.ajax calls are finished? Perhaps this code snippet will help explain the question:

var apiSoftFail = false;

var myCallback = function(jsonData) {
  // lets say the json data returned by the ajax call contains a boolean
  // indicator of whether or not the purpose for doing the api call was successful
  if (jsonData.success) { 
    // do things with the jsonData returned
  } else {
    apiSoftFail = true; 
  }
};

var apiRequest = function(endpoint,callback) {
  return $.ajax(
    {'url':endpoint,'contentType': 'application/json'}
  ).done(function(data) {
    callback(data)
  });
};

$.when(
  apiRequest("/apiEndpoint1",myCallback),
  apiRequest("/apiEndpoint2",myCallback),
  apiRequest("/apiEndpoint3",myCallback)
).done(function() {
  if (apiSoftFail) {
    // "API Soft Fail"
    doThisFailureFunction();
  } else {
    doThisSuccessFunction();
  }
}).fail(function() {
  // "API Hard Fail"
  doThisFailureFunction();
});

Thanks in advance for any insight you can provide or suggestions you have for better ways of doing this.

Answer 1

Yes, you just had a few problems with your code. In particular, you need to give done a function.

.done(function() {
  if (apiSoftFail) {
    // "API Soft Fail"
    doThisFailureFunction();
  } else {
    doThisSuccessFunction();
  }
}

You can check here: The api calls will all call their own callbacks first and output their results, then "success" will be printed after.

If you run this snippet a couple of times, you'll see the individual requests do not run in a defined order (some will sometimes complete before others), but the "success" print will always come last.

 var apiSoftFail = false; var myCallback = function(jsonData) { // lets say the json data returned by the ajax call contains a boolean // indicator of whether or not the purpose for doing the api call was successful if (jsonData) { console.log(jsonData); // do things with the jsonData returned } else { apiSoftFail = true; } }; var doThisFailureFunction = function() { } var doThisSuccessFunction = function() { console.log("success"); } var apiRequest = function(endpoint,callback) { return $.ajax( {url:endpoint,'contentType': 'application/json'} ).done(function(data) { callback(data); }); }; $.when( apiRequest("https://jsonplaceholder.typicode.com/todos/1",myCallback), apiRequest("https://jsonplaceholder.typicode.com/todos/2",myCallback), apiRequest("https://jsonplaceholder.typicode.com/todos/3",myCallback) ).done(function() { if (apiSoftFail) { // "API Soft Fail" doThisFailureFunction(); } else { doThisSuccessFunction(); } }).fail( // "API Hard Fail" doThisFailureFunction ); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>