提问人:Jader Dias 提问时间:7/20/2009 最后编辑:Jader Dias 更新时间:4/21/2022 访问量:45778
如何使所有AJAX调用都是顺序的?
How to make all AJAX calls sequential?
问:
我使用jQuery。而且我不希望在我的应用程序上进行并行 AJAX 调用,每次调用都必须等待前一次调用才能开始。如何实现?有帮手吗?
更新如果有任何 XMLHttpRequest 的同步版本或 jQuery.post 我想知道。但是顺序!=同步,我想要一个异步和顺序的解决方案。
答:
你能想到两个选择。一种是通过回调来链接它们。另一种是使调用同步而不是异步。
您希望它们按顺序排列是有原因的吗?这会减慢速度。
若要使调用同步,请将 Ajax 调用中的 async 选项设置为 false。请参阅 http://docs.jquery.com/Ajax/jQuery.ajax#options 上的文档(单击“选项”选项卡查看它们)。
评论
看看这个:http://docs.jquery.com/Ajax/jQuery.ajax(点击“选项”选项卡)。
但请记住,同步调用将冻结页面,直到收到响应,因此它不能在生产站点中使用,因为如果用户出于任何原因不得不等待 30 秒,浏览器冻结,他们会生气。
编辑:好的,通过您的更新,您想要实现的目标更加清晰;)
因此,您的代码可能如下所示:
$.getJSON("http://example.com/jsoncall", function(data) {
process(data);
$.getJSON("http://example.com/jsoncall2", function (data) {
processAgain(data);
$.getJSON("http://example.com/anotherjsoncall", function(data) {
processAgainAndAgain(data);
});
});
});
这样,只有在收到并处理了对第一个呼叫的响应时才会发出第二个呼叫,并且只有在接收并处理了对第二个呼叫的响应时才会发出第三个呼叫。此代码适用于 getJSON,但可以适应 $.ajax。
评论
最好的方法是像 Nosredna 所说的那样链接回调。我不建议使用同步 XMLHttpRequest,因为它们会锁定您的整个应用程序。
据我所知,没有太多的帮助,但你可以做一些类似于回调FIFO的事情。
您可以尝试使用叙述性 javascript http://www.neilmix.com/narrativejs/doc/
不过我自己从来没有用过它。如果我想这样做,我会设置某种抽象来链接异步操作。正如其他人所说,ajax 对象的同步版本在等待响应时会阻止事件被处理。这会导致浏览器看起来像是冻结的,直到它收到响应。
评论
将 async 选项设置为 false,例如,
$.ajax({ async: false /*, your_other_ajax_options_here */ });
评论
同步调用不一定更慢,如果你有一个应用程序,其中 AJAX 调用打开、发布到,然后关闭套接字,则对套接字的多次调用没有意义,因为某些套接字只能处理单个连接,在这种情况下,排队数据,使其仅在上一个 AJAX 调用完成时发送意味着更高的数据吞吐量。
有一种比使用同步 ajax 调用更好的方法可以做到这一点。Jquery ajax 返回一个延迟,因此您可以使用管道链接来确保每个 ajax 调用在下一次运行之前完成。下面是一个工作示例,其中包含您可以在 jsfiddle 上使用的更深入的示例。
// How to force async functions to execute sequentially
// by using deferred pipe chaining.
// The master deferred.
var dfd = $.Deferred(), // Master deferred
dfdNext = dfd; // Next deferred in the chain
x = 0, // Loop index
values = [],
// Simulates $.ajax, but with predictable behaviour.
// You only need to understand that higher 'value' param
// will finish earlier.
simulateAjax = function (value) {
var dfdAjax = $.Deferred();
setTimeout(
function () {
dfdAjax.resolve(value);
},
1000 - (value * 100)
);
return dfdAjax.promise();
},
// This would be a user function that makes an ajax request.
// In normal code you'd be using $.ajax instead of simulateAjax.
requestAjax = function (value) {
return simulateAjax(value);
};
// Start the pipe chain. You should be able to do
// this anywhere in the program, even
// at the end,and it should still give the same results.
dfd.resolve();
// Deferred pipe chaining.
// What you want to note here is that an new
// ajax call will not start until the previous
// ajax call is completely finished.
for (x = 1; x <= 4; x++) {
values.push(x);
dfdNext = dfdNext.pipe(function () {
var value = values.shift();
return requestAjax(value).
done(function(response) {
// Process the response here.
});
});
}
有些人评论说,他们不知道代码是做什么的。为了理解它,你首先需要理解javascript的承诺。我很确定 promise 很快就会成为原生的 javascript 语言功能,所以这应该会给你一个很好的学习动力。
评论
async: false
如何使用 Node.js 事件?
var EventEmitter = require('events').EventEmitter;
var eventEmitter = new EventEmitter();
var $ = require('jquery');
var doSomething = function (responseData) {
var nextRequestData = {};
// do something with responseData
return nextRequestData;
};
// ajax requests
var request1 = $.ajax;
var request2 = $.ajax;
var requests = [request1, request2];
eventEmitter.on('next', function (i, requestData) {
requests[i](requestData).then(
function (responseData) {
console.log(i, 'request completed');
if (i+1 < requests.length) {
var nextRequestData = doSomething(responseData);
eventEmitter.emit('next', i+1, nextRequestData);
}
else {
console.log('completed all requests');
}
},
function () {
console.log(i, 'request failed');
}
);
});
var data = {
//data to send with request 1
};
eventEmitter.emit('next', 0, data);
sequential != synchronous,我想要一个异步和顺序的解决方案
同步执行通常意味着“使用相同的时钟”,而顺序执行意味着“按顺序或顺序跟随”。
对于您的特定用例,我认为必须满足这两个条件,因为异步执行意味着非顺序结果的可能性。
(async () => {
for(f of ['1.json','2.json','3.json']){
var json = await $.getJSON(f);
console.log(json)
};
})()
- 使用 jQuery ajax 调用请求 3 个 json 文件
- 使用 await 按顺序(不并行)处理
- 适用于 Chrome/Firefox/Edge(截至 2018 年 1 月 30 日)
更多内容请见 MDN
您可以使用 promise 使 ajax 调用按顺序进行。使用 Array push 和 pop promise 方法,顺序 ajax 调用会容易得多。
var promises = [Promise.resolve()];
function methodThatReturnsAPromise(id) {
return new Promise((resolve, reject) => {
$.ajax({
url: 'https://jsonplaceholder.typicode.com/todos/'+id,
dataType:'json',
success: function(data)
{
console.log("Ajax Request Id"+id);
console.log(data);
resolve();
}
});
});
}
function pushPromise(id)
{
promises.push(promises.pop().then(function(){
return methodThatReturnsAPromise(id)}));
}
pushPromise(1);
pushPromise(3);
pushPromise(2);
评论
对 jQuery 异步操作进行排序的现代方法是使用它们已经返回的 promise 和 promise 支持的流控制,而这在前几年的任何其他答案中目前都没有显示。
例如,假设您想加载多个脚本,但这些脚本必须按顺序加载,因此第二个脚本在第一个脚本完成之前不会加载/运行,依此类推,您想知道它们何时全部完成。您可以直接使用已经返回的 promise。为简单起见,您可以在这样的循环中做出承诺:$.getScript()
$.getScript()
await
for
async function loadScripts(scriptsToLoad) {
for (const src of scriptsToLoad) {
await $.getScript(src);
}
}
loadScripts([url1, url2, url3]).then(() => {
console.log("all done loading scripts");
}).catch(err => {
console.log(err);
});
由于所有与 jQuery Ajax 相关的异步操作现在都返回 promise(并且已经很多年了),您可以将此概念扩展到任何与 jQuery 的 Ajax 相关的操作。
另外,请注意,此处其他答案中将 jQuery 操作包装在新 promise 或延迟的 jQuery 中的所有其他尝试都已过时,并被视为 promise 反模式,因为当操作本身已经返回 promise 时,您可以直接使用该 promise,而无需尝试将其包装在自己的新 promise 中。
评论
await
评论