Javascript ajax 同步请求不起作用

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 ?

Answer 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);

Answer 2

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)

Answer 3

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