Tengo 4 pestañas en html y tengo que llamar a 4 api diff que devuelven json y muestran esa salida en cada pestaña.

Ahora el problema es que, cuando escribo ajax staments uno tras otro con async: false, la página se carga y lleva tiempo, ya que llama a las 4 api una tras otra.

Quiero que los datos en la primera pestaña "panel" se carguen primero, ya que aparecen rápidamente. Mientras tanto, las otras pestañas se están cargando.

 $.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"); }

El problema es que cada API tarda de 3 a 4 segundos en obtener datos y, cuando se ejecuta secuencialmente, tarda de 12 a 15 segundos, lo que no es deseable.

Cuando cambio async: true, en todo lo anterior, entonces las salidas json que dan algunos cambios de valores numéricos y los datos no son confiables.

También probé esto usando fetch api, (utilicé declaraciones de fetch/promise.all) pero todos estos dan una respuesta incorrecta.