I have 4 tabs in html and i have to call 4 diff api's which return json and render that output in each tab.

Now the problem is, when i write ajax staments one after another with async:false, the page loads and it takes time as it callls all 4 api's one after another.

I want the data on first tab "dashboard" to load first as it comes up quickly. Meanwhile the other tabs are loading.

$.ajax({
    url : base_url+"es/kernelStats",
    type : "get",
    async : false,
    dataType: 'json',
    success : function(data) {    
    console.log("ES Data ",Object.values(data));
    drawDataTable(data,"es");
    }
});

$.ajax({
    url : base_url+"tab1/stats",
    type : "get",
    async : false,
    dataType: 'json',
    success : function(data) {
        console.log(" Data ",data);
        drawDataTable(data,"tab1");

    }
});


$.ajax({
    url : base_url+"tab2/Stats",
    type : "get",
    async : false,
    success : function(data) {
        console.log("Data ",data);
        drawDataTable(data,"tab2");
    }
});

$.ajax({
    url : base_url+"tab3/Stats",
    type : "get",
    async : false,
    success : function(data) {
        console.log("Data ",data);
        drawDataTable(data,"tab3");
    }
});

$.ajax({
    url : base_url+"tab4/Stats",
    type : "get",
    async : false,
    success : function(data) {
        console.log("Data ",data);
        drawPatchingDataTable(data,"tab4");
    }

The problem is, each api takes 3-4 sec to get data and when executed sequentially it takes 12-15seconds which is not desirable.

When i change async : true, in all above, then the json outputs that gives some numeric values changes and the data is not reliable.

I have also tried this using fetch api, (used fetch statements / promise.all ) but all these give wrong response.