Question

我有两个ajax调用，无法在一个调用中完成。当第一个ajax调用开始时，第二个ajax调用可以立即启动，也可以在用户按下发送按钮时启动。如果第二个ajax调用开始，他必须等待第一个ajax调用的响应，因为他需要来自它的数据。

我怎样才能实现第二个ajax调用仅在第一个ajax调用的响应到达后才发送请求？

除了setTimeout还有其他方法吗？
我可以以某种方式在ajax call 1上注册ajax call 2的监听器吗？

我的代码是：

var xhrUploadComplete = false;

// ajax call 1
$.ajax({
url: url,
type: "POST",
data: formdata,
processData: false,
contentType: false,
complete: function(response) {
    var returnedResponse = JSON.parse(response.responseText);
    xhrUploadComplete = true;
}
});

// ajax call 2
if (xhrUploadComplete) {
  $.ajax({
  url: url2,
  type: "POST",
  data: formdata2,
  processData: false,
  contentType: false,
  complete: function(response) {
    ...
  }
  });
}

编辑：第二次ajax调用无法在第一次调用的done（）或complete（）中发布，因为它取决于用户选择发送最终表单。这个两步过程的目的是在用户将图像插入输入类型=文件后立即将图像发送到服务器。

编辑：知道我不能使用if（..）因为这是异步调用。我写这篇文章是为了说明我需要做什么。我想我需要像Java一样的未来。

Answer 1

xhrUploadComplete将异步设置为true（将来，请求完成时），因此您的if条件（在请求启动后立即评估）将会永远不会实现。你不能简单地return (or set) a value from an ajax call。相反，将等待结果的代码移动到将设置/返回变量的处理程序中：

$.ajax({
    url: url,
    type: "POST",
    data: formdata,
    processData: false,
    contentType: false,
    complete: function(response) {
        var returnedResponse = JSON.parse(response.responseText);
        $.ajax({
            url: url2,
            type: "POST",
            data: formdata2,
            processData: false,
            contentType: false,
            complete: function(response) {
                …
            }
        });
    }
});

使用Promise模式，您可以更优雅地构建它们：

$.ajax({
    url: url,
    type: "POST",
    data: formdata,
    processData: false,
    contentType: false
}).then(function(response) {
    var returnedResponse = JSON.parse(response.responseText);
    return $.ajax({
        url: url2,
        type: "POST",
        data: formdata2,
        processData: false,
        contentType: false
    });
}).done(function(response) {
    // result of the last request
    …
}, function(error) {
   // either of them failed
});

也许您还需要这个：

var ajax1 = $.ajax({
    url: url, …
}).then(function(response) {
    return JSON.parse(response.responseText);
});
$(user).on("decision", function(e) { // whatever :-)
    // as soon as ajax1 will be or has already finished
    ajax1.then(function(response1) {
        // schedule ajax2
        return $.ajax({
             url: url2, …
        })
    }).done(function(response) {
        // result of the last request
        …
    }, function(error) {
        // either of them failed
    });
});

Ajax调用等待另一个Ajax调用的响应？

1 个答案: