如何使用回调操作来自多个异步 ajax 异步调用的数据？

Question

I have the following piece of code that make async ajax calls with callback.

My first main issue is that is that when i do data manipulation using callback functions setA,setB,... the returned values from ajax calls are not always present and I end doing operations on unidentified variables from "dataFromAjax". Is there a way to perform the operation in setB only when i know that i have some data in dataFromAjax['firstCall'] which was set by function setA ?

Second question is there a way to simplify the code without having to create a new success function for every data manipulation?

dataFromAjax = {};

function makeACall(url,successCallBack,errorCallback){
   $.ajax({ 
          type: 'GET', 
          async: true,
          url: url, 
          success: successCallBack,
          error: errorCallback
          });
}

makeACall(url,setA,errorAjax)
makeACall(url,setB,errorAjax)
makeACall(url,setC,errorAjax)
makeACall(url,setD,errorAjax)

function setA(ajaxData){
   dataFromAjax['firstCall'] = ajaxData;       
}

function setB(ajaxData){
  dataFromAjax['secondCall'] =  dataFromAjax['firstCall'] + ajaxData;       
}

function setC(ajaxData){
  dataFromAjax['thirdCall'] =  dataFromAjax['secondCall'] / ajaxData;       
}

Answer 1

You can try with $.when function, here is documentation https://api.jquery.com/jquery.when/ Basically your code could looks like in example:

$.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) ).done(function( a1, a2 ) {
  // a1 and a2 are arguments resolved for the page1 and page2 ajax requests, respectively.
  // Each argument is an array with the following structure: [ data, statusText, jqXHR ]
  var data = a1[ 0 ] + a2[ 0 ]; // a1[ 0 ] = "Whip", a2[ 0 ] = " It"
  if ( /Whip It/.test( data ) ) {
    alert( "We got what we came for!" );
  }
});

In your case something like (depends on what you want achieve)

$.when($ajax.(url), $.ajax(url), $.ajax(url), $.ajax(url)).then(success, error);

function success(a, b, c, d) { return (a+b)/c; }
function error() { /* error handling */ }    

Answer 2

If you want to check if property exists in the object (made it more consistent).

if (dataFromAjax.firstCall) {
  dataFromAjax.secondCall =  dataFromAjax.firstCall + ajaxData; 
}

I'm not sure if I understand but if you don't want to make a separate success callback for every ajax call you can make a default one and remove an argument.

function defaultSuccess(ajaxData) {
    // do what you want
}

function makeACall(url, errorCallback){
   $.ajax({ 
          type: 'GET', 
          async: true,
          url: url, 
          success: defaultSuccess,
          error: errorCallback
          });
}