Async:false on app.request freezes my UI


#1

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!


#2

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


#3

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.


#4

Its right, call functions when async requset done succes


#5

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


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

#7

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()