To execute a method which performs async ajax call sequentially

Question

I have a set of data in the client-side which I need to pass to the MVC controller and process sequentially. I am using ajax async method to pass the data to the server. Currently, two calls are parallelly firing, though I am passing data one by one to the server. I need to keep the UI thread to wait until the first request completes.

    var data=["A","B","C"];

    $.each(data,function(item){
        setTimeout(function(){
            // Ajax async call 
        },1000);
    });

Hi try to use async and await https://stackoverflow.com/questions/14455293/how-and-when-to-use-async-and-await — stan chacon, Sep 02 '19 at 17:42
How do i keep the UI thread wait with this? I have tried this approach. however, it doesn't help the cause. I am looking for some mechanism in the client-side itself to hold the execution. — biju m, Sep 02 '19 at 17:58
Correct me if im wrong but you want to wait until the first ajax call complete to fire the second one right ? — stan chacon, Sep 02 '19 at 18:15
I think you go this wrong ! Block the ui thread is not a good idea what you could do is add some loader to display until the two calls are done i can give you an example of that if you want ? — stan chacon, Sep 03 '19 at 15:51
Thanks for your time. I do not intend to block the thread. I want it to be released as soon as the first call hits the server. I want to queue the ajax calls one after another. If you can help with the example code that would be greatful — biju m, Sep 03 '19 at 16:37
I post and example with the fiddle and some documentation Hope it helps =) — stan chacon, Sep 03 '19 at 17:20

score 0 · Answer 1 · answered Sep 03 '19 at 17:20

Hi here is an example with jsfiddle using Deferred Objects the basic of this example is simple I use 2 separate functions:

one to login a user.
the other one will display some data once the login is complete.

The first call display a modal before it sends the data, once the request is done and the login success the modal msg updates and the second call is executed, after the second call completes the information is displayed into the modal.

The code is a basic example and was made on the fly, it does not have a fail method or an always method but I left the link to the documentation in case you want to implement those methods:

The Javascript:

const _ajaxLogin = (data)=>{
console.log(data);
return $.ajax({
    type: 'POST',
    url: '/echo/json/',
    data: {json:JSON.stringify(data),delay:1},
    beforeSend: function() {
        $('#myModal').css("display","block");
    },
    dataType: 'json'
})
}

const _ajaxInfo = (data)=>{
console.log(data);
return $.ajax({
    type: 'POST',
    url: '/echo/json/',
    data: {json:JSON.stringify(data),delay:3},
    dataType: 'json'
})
}

$('#btnLogin').on('click',(e)=>{
let username = $('#txtUsername').val(),
password = $('#txtPassword').val(),
json = {
username : username,
password : password,
response: "success"
};
var information = {status:"active",account:34566 , currency:"$", amount: 42250, last_transaction:'05/08/2019 14:25:32', name:"John", lastname:"Doe"};
_ajaxLogin(json)
.done((response)=>{
if(response.response == "success"){
$('#msgTittle').text("Loading Your Account Information");
_ajaxInfo(information)
.done((account_response)=>{
    if(account_response.status != undefined){
  $('#loading').css("display","none");
  $('#msgTittle').text("Welcome back "+account_response.name+" "+account_response.lastname);
  $("#info").text("Account:"+account_response.account+", your avaliabvle money is "+account_response.currency+account_response.amount+", your last transaction was "+account_response.last_transaction);
  $('#btnLogout').css("display","");
  } 
})
}
})//end first done
.fail((response)=>{
console.log("error:"+response);
})
});//end click


$('#btnLogout').on('click',(e)=>{
$("#info").text("");
$('#loading').css("display","block");
$('#msgTittle').text("Your login was successfull");
$('#myModal,#btnLogout').css("display","none");
});

**Edit:**As you can see there are some echo/json stuff in the url this is the way jsfiddle has to simulate an ajax call

Hope it helps

To execute a method which performs async ajax call sequentially

1 Answers1