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

Javascript Ajax同步请求不起作用

3 个答案: