Javascript ajax synchronous request is not working

Question

I'm making sequential AJAX requests for my websites. There are 2 POST requests. The second request should be processed after first request is done. My code is as below:

$.ajax({
    type: 'POST',
    url: '/backend/edge/enableNewAgent/',
    async: false,
    success: function () {
        console.log("First Process Done");
    }
});
$.ajax({
    type: 'POST',
    url: '/backend/edge/deleteOldAgent/',
    async: false,
    success: function () {
        console.log("Second Process Done");
    }
});

The second process is done after first process, but the console logging is executed after second process done, not after first process done. I want the console.log is executed soon after first process done, then continue executing the second process. Can someone help ?

oops, I read "asynchronous" sorry - anything in the developer tools console to show what weird thing may be going on? .... note: you know the first A in AJAX stands for Asynchronous, so async:false is kind of an oxymoron :p — Jaromanda X
– Jaromanda X, Commented Oct 16, 2018 at 10:28
Never use async: false. It is the cause of the problem as the thread to update the console is blocked by the second AJAX request, so both items appear at the same time, after both requests have completed. To fix this use the callback pattern properly by making the second AJAX call within the success handler function of the first. — Rory McCrossan
– Rory McCrossan, Commented Oct 16, 2018 at 10:29
In Chrome, at least, console logging is not synchronous. By using async: false you don't yield control back to the event loop so the console.log lines get queued up. — Alnitak
– Alnitak, Commented Oct 16, 2018 at 10:29
in fact, not console.log, but like changing progressbar length from 10% to 20% @Alnitak — Williams Perdana
– Williams Perdana, Commented Oct 16, 2018 at 10:42
jsbin.com/kovisedoqu/1/edit?js,console — I can't reproduce the problem. — Quentin
– Quentin, Commented Oct 16, 2018 at 10:43

Jaromanda X · Accepted Answer · 2018-10-16 10:51:32Z

1

If you want to write synchronous "looking" code and avoid synchronous XMLHttpRequest - you can use async/await

async function doAjax() {
    await $.ajax({
        type: 'POST',
        url: '/backend/edge/enableNewAgent/',
        success: function() {
            console.log("First Process Done");
        }
    });
    await $.ajax({
        type: 'POST',
        url: '/backend/edge/deleteOldAgent/',
        success: function() {
            console.log("Second Process Done");
        }
    });
}

actually, it's better done like

async function doAjax() {
    await $.ajax({
        type: 'POST',
        url: '/backend/edge/enableNewAgent/'
    });
    console.log("First Process Done");
    await $.ajax({
        type: 'POST',
        url: '/backend/edge/deleteOldAgent/'
    });
    console.log("Second Process Done");
}

Note, it HAS to be done inside a function (doesn't have to be a separate function like this, just put that there to enforce the idea ... await is only inside async function)

answered Oct 16, 2018 at 10:51

Jaromanda X

1

Sign up to request clarification or add additional context in comments.

3 Comments

Eric Herlitz Over a year ago

Sure, but if IE support is required this solution is smoked.

Jaromanda X Over a year ago

@EricHerlitz - have you heard of babel?

Eric Herlitz Over a year ago

Yea, it's wild.

Alnitak · Accepted Answer · 2018-10-16 10:48:12Z

1

Using async: false means that you never yield to the event loop, and the console.log lines get queued up (as do all other display updates).

My approach would be this:

function enableNewAgent() {
    return $.post('/backend/edge/enableNewAgent/',
        () => console.log('enableNewAgent Done')
    );
}

function deleteOldAgent() {
    return $.post('/backend/edge/deleteOldAgent/',
        () => console.log('deleteOldAgent Done')
    );
}

enableNewAgent().then(deleteOldAgent);

If you require further operations, add them to the .then chain:

enableNewAgent().then(deleteOldAgent).then(nextOperation);

answered Oct 16, 2018 at 10:48

Alnitak

341k72 gold badges420 silver badges503 bronze badges

Comments

Tuhin · Accepted Answer · 2018-10-16 10:57:07Z

0

You can try

$.ajax({
  type: 'POST',
  url: '/backend/edge/enableNewAgent/',
  success: function() {
    console.log("First Process Done");
  }
}).then(function(){
      $.ajax({
      type: 'POST',
      url: '/backend/edge/deleteOldAgent/',
      success: function() {
        console.log("Second Process Done");
      }
    });

edited Oct 16, 2018 at 10:57

answered Oct 16, 2018 at 10:30

Tuhin

594 bronze badges

3 Comments

Alnitak Over a year ago

this probably won't fix the problem with the OP's console.log sequencing, but if you were to make it async: true instead (which is of course the right thing to do anyway) it would all work.

Williams Perdana Over a year ago

Still not wotking on >= 3rd ajax post :( stuck @Alnitak

Alnitak Over a year ago

@WilliamsPerdana there's a better than nested callbacks - see my answer.

Collectives™ on Stack Overflow

Javascript ajax synchronous request is not working

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related