Javascript Ajax синхронный запрос не работает

Question

Я делаю последовательные запросы AJAX для моих сайтов.Есть 2 запроса POST.Второй запрос должен быть обработан после выполнения первого запроса.Мой код выглядит следующим образом:

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

Второй процесс выполняется после первого процесса, но ведение журнала консоли выполняется после второго процесса, а не после первого процесса.Я хочу, чтобы console.log выполнялся вскоре после завершения первого процесса, затем продолжите выполнение второго процесса.Может кто-нибудь помочь?

Answer 1

Использование async: false означает, что вы никогда не попадете в цикл обработки событий, а строки console.log будут поставлены в очередь (как и все остальные обновления отображения).

Мой подход будет следующим:

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

Если вам требуются дополнительные операции, добавьте их в цепочку .then:

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

Answer 2

Если вы хотите написать синхронный «выглядящий» код и избежать синхронного XMLHttpRequest - вы можете использовать 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");
        }
    });
}

на самом деле, лучше сделать как

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

Примечание,это ДОЛЖНО быть сделано внутри функции (необязательно, чтобы это была отдельная функция, просто поместите ее для реализации идеи ... await находится только внутри async функции)

Answer 3

Можно попробовать

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