Calling multiple ajax calls all at once using JQuery..

multiple_jquery_ajax.js

//spread the options here.... 

let xhrURLOptns = {
    cors: true,
    crossDomain: true,
    contentType: 'application/json',
    withCredentials: true,
    beforeSend: function (xhr) {
        xhr.setRequestHeader('Authorization', `Bearer ${token}`);
    }
};

//then equate it in every request.... 
const setkinStateCityAndLGA = (stateObj) => {
    let state_id = $(stateObj).val();
    shwLdr('loading LGAs and Cities');
    $.when(
      
        $.ajax({                //retrieve LGAS here.. 
            ...xhrURLOptns,
            url: `${prefix}api/v1/shared/GetAllLGAByStateCode?stateCode=${state_id}`,
            type: 'get',
        }),
      
        $.ajax({               //retrieve Cities here.. 
            ...xhrURLOptns,
            url: `${prefix}api/v1/shared/GetCitiesByStateCode?stateCode=${state_id}`,
            type: 'get',
        });
      
    ).done(function (lgas, cities) {
      
        console.log(lgas, cities);  //then here.. you treat seperately... 
      
        hideLdr();
    }).fail(function (xhr, status) {
        console.log(xhr, status);
        hideLdr();
    });


}