[SOLVED] Async:false on app.request freezes my UI

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!

async => true
Нужно всегда делать асинхронно

If I set async => true to true then I wont be able to render any response from the api to my mobile app since the execution continues before receiving any response.

Its right, call functions when async requset done succes

A sample based on the code provided in the question will be appreciated.

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
	};

}
requestDone: function(data) {

      console.log(data);

}

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			: true,
		data			: $args, 
		success			: function(data, textStatus ){

			// We have received response and can hide activity indicator
			app.preloader.hide();
			
                        requestDone(data);			

		},		
		error: function(xhr, textStatus, errorThrown){ 
			
			// We have received response and can hide activity indicator
			app.preloader.hide();
			
			di = textStatus;
			
		},		       
		
	});
	
	return di;	
	
}

Yes, async in request params should always be true. And it related to what is async / await means. Move your request logic from component data() to, for example in mounted() hook. And after request is done, update component data with $setState()

Thanks. I refactored my code base and its now working!