Question 69704 in Ajax Question posted in
You can find the official documentation here.

I want to execute 4 api's parallelly from my javascript to display data in each tab, but specifying async:true in ajax gives wrong integer output – Jquery ajax

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.

enter image description here

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.

Tags:

2

Answers


  1. 0

    Promise.all is the method to use. You should give that another go

    Login or Signup to reply.
  2. 0

    Note: that time will take that much only, but you can try this method may be this work or you can make some changes in that,

    const fireApi = (url, param, afterSuccess) => {
    $.ajax({
        url : base_url+url,
        type : "get",
        success : function(data) {
            console.log("Data ",data);
            afterSuccess(data, param)
        }
    });
}
fireApi("tab1/stats", "tab1", drawDataTable)
fireApi("tab2/stats", "tab2", drawDataTable)
fireApi("tab3/stats", "tab3", drawDataTable)
fireApi("tab4/stats", "tab4", drawPatchingDataTable)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search