链 ajax 一个又一个 ajax 完成

Question

我一直在为我的问题而挣扎，但仍然找不到任何可能的答案。这是我的问题和我当前的(坏)解决方案

我有一个名为URL1的 URL，在通过ajax(称为 ajax1)成功从该 URL 检索数据后，我使用URL2执行另一个 ajax(称为ajax2)。如果 ajax2 成功，我需要再次执行ajax1，第一次调用使用相同的数据。下面的代码是我当前的实现，假设我第一次成功调用了ajax1。

...
ajax1: function () {
var ajaxPost = $.ajax({
type: "POST",
url: myUrl,
contentType: "application/json; charset=utf-8",
data: myData
});
return ajaxPost;
},
ajax2: function (url, data, async) {
var ajaxPost = $.ajax({
type: "POST",
url: url,
contentType: "application/json; charset=utf-8",
data: JSON.stringify(data),
dataType: 'json',
async : async
});
return ajaxPost;
},
...
var ajax2 = ajax2(**URL2**, myDataObject,**false**)
ajax2.done(function(data, textStatus, xhr) {
ajax1();
if(data.status === "success") {
$('#success').html(data.message);
$('#success').show();
} else {
$('#error').html(data.message);
$('#error').show();
}
});

正如我们在上面的代码片段中看到的，ajax2的异步设置为false。通过此实现，在成功返回ajax2并且程序运行到 .done() 回调后，ajax1也可以成功执行。

我知道这种实现的做法很糟糕，因为它会阻止 UI。我想异步执行此请求，但是如果我将 ajax2 的异步设置为true，则在成功返回 ajax2 并且程序运行到 .done() 回调后，ajax1无法将其请求发送到服务器。似乎浏览器阻止了此请求，因为我在服务器端的断点无法捕获任何内容，并且ajax2 的 ajaxPost变量是

对象 {readyState： 0， status： 0， statusText： "canceled"}

我觉得我错过了一些非常重要和非常基本的东西，所以任何帮助将不胜感激。

UPDATE1更具体地说：我可以使用 .then() 和 $ 在 ajax1 之后链接ajax2。延迟()。链的运行就像我期望的那样，但是浏览器仍然取消了ajax2 的 ajax请求。这是使用 .then() 的代码

var ajax2 = ajax2(**URL2**, myDataObject,**false**)
ajax2.done(function(data, textStatus, xhr) {
if(data.status === "success") {
$('#success').html(data.message);
$('#success').show();
} else {
$('#error').html(data.message);
$('#error').show();
}
}).then(function(){
ajax1();
});

使用 $。延期()

var ajax2 = ajax2(**URL2**, myDataObject,**false**);
var dfrd = $.Deferred();
ajax2.done(function(data, textStatus, xhr) {
if(data.status === "success") {
$('#success').html(data.message);
$('#success').show();
} else {
$('#error').html(data.message);
$('#error').show();
}
dfrd.resolve();
})
dfrd.then(function(){
ajax1();
});

Answer 1

为什么不使用 last ajax 的结果来保存 ajax2.done() 中的控件。喜欢这个：

var ajax2 = ajax2(**URL2**, myDataObject)
ajax2.done(function(data, textStatus, xhr) {
var result = ajax1();
result.done(function(){
if(data.status === "success") {
$('#success').html(data.message);
$('#success').show();
} else {
$('#error').html(data.message);
$('#error').show();
}
});
});

我希望它有所帮助

Answer 2

对于任何停下来的人，我已经解决了这个问题。

...
ajax1: function () {
var ajaxPost = $.ajax({
type: "POST",
url: myUrl,
contentType: "application/json; charset=utf-8",
data: myData
});
return ajaxPost;
},
ajax2: function (url, data, async) {
var ajaxPost = $.ajax({
type: "POST",
url: url,
contentType: "application/json; charset=utf-8",
data: JSON.stringify(data),
dataType: 'json',
async : async
});
return ajaxPost;
},
...
var ajax2 = ajax2(**URL2**, myDataObject,**false**)
ajax2.done(function(data, textStatus, xhr) {
setTimeout(function() {
ajax1();
}, 0);
if(data.status === "success") {
$('#success').html(data.message);
$('#success').show();
} else {
$('#error').html(data.message);
$('#error').show();
}
});

setTimeout魔法来拯救。我真的不知道为什么这个解决方案有效。到目前为止，根据我的检查，似乎.done()回调做得还不够，ajax2()完成后浏览器仍然需要处理一些事情。当ajax1()被召回.done()时，浏览器只是拒绝此请求，因为它尚未与ajax2()完成业务。 通过使用setTimeout，我将ajax1()放在执行队列的末尾，从而为浏览器提供在执行ajax1()之前完成所有内容的时间。