Ajax response is not received before application is loaded in extjs - ajax

Question

I would like to send Ajax request in launch function and based on the response to open either login window or main window.
Application.js
launch: function () {
debugger;
Ext.Ajax.request({
url: 'php/foo.php',
params: {
email: 'test#gg.com',
password: '12345',
},
success: function(response, opts){console.log('OK');},
failure: function(response, opts){console.log('ERROR');},
});
debugger;
console.log('This should be printed after Ajax response (either OK/ERROR)');
debugger;
foo.php
<?php
$login=$_POST['email'];
$pass=$_POST['password'];
$result = array();
echo json_encode(array(
"success" => $pass=="123456",
"data" => $result
));
But, I've noticed the response from the Ajax call is not ready before the function ends (Figure 1)

Answer 1

Ajax requests are asynchronous and in the above code example, the ajax request is submitted to the server and then the program steps to the next line of code (debugger). Any action to be performed upon a successful request needs to be done inside of the success callback function.
Since this is ExtJS, one pattern I have used, is to fire a global event, something like this:
Ext.GlobalEvents.fireEvent('applicationstart')
The main application listens for this event and that in turn opens the main application. These are other ways of doing this though.

Answer 2

You can do it by setting async:false to request to be synchronous, but this is not recommended.
Ex.
Ext.Ajax.request({
async: false,
url: 'php/foo.php',
params: {
email: 'test#gg.com',
password: '12345',
},
success: function(response, opts){console.log('OK');},
failure: function(response, opts){console.log('ERROR');},
});