Hello,
I have been using Async/Await to get data from APIs but the user experience has been less than pleasant. The UI freezes and the preloader fails to load. I know is possible to continue execution and render the output to the interface once the ajax call returns a response. I have come across articles on Async/Await and Promise that seem to point towards the solution but I haven’t quite figured out a solution.
This is the current “working” code
On my template
data: function() {
var items = [];
var postData = {
"code_id" : "382",
"payload" : {
"field_1" : 'data_1',
"field_1" : 'data_1',
}
};
my_response = process_api(postData,function(arg) {return arg;});
if (my_response === undefined || my_response === null)
{
items = [];
}
else
{
items = my_payload;
}
return {
items: items
};
}
On a globally accessible .js file I have :
function process_api($args,callback)
{
var di = [];
//Show Indicator
app.preloader.show();
app.request({
url : GBL_ENDPOINT,
method : 'POST',
dataType : 'json',
crossDomain : true,
async : false,
data : $args,
success : function(data, textStatus ){
// We have received response and can hide activity indicator
app.preloader.hide();
//console.log(data);
di = data;
},
error: function(xhr, textStatus, errorThrown){
// We have received response and can hide activity indicator
app.preloader.hide();
di = textStatus;
},
});
return di;
}
Any tips/ideas/direction on the best practices that I can deploy to sort out this UI freeze issue based on the code provided will be appreciated.
Thanks!