如何使用jquery链接ajax调用

我需要在不locking浏览器的情况下进行一系列的N ajax请求，并且希望使用jQuery的延迟对象来实现这一点。

下面是一个有三个请求的简单例子，但是我的程序可能需要排队超过100个（请注意，这不是确切的用例，实际的代码确实需要在执行下一步之前确保步骤（N-1）的成功步）：

$(document).ready(function(){ var deferred = $.Deferred(); var countries = ["US", "CA", "MX"]; $.each(countries, function(index, country){ deferred.pipe(getData(country)); }); }); function getData(country){ var data = { "country": country }; console.log("Making request for [" + country + "]"); return $.ajax({ type: "POST", url: "ajax.jsp", data: data, dataType: "JSON", success: function(){ console.log("Successful request for [" + country + "]"); } }); } 

以下是写入控制台的内容（所有请求都是并行进行的，响应时间与预期的每个国家的数据大小成正比：

 Making request for [US] Making request for [CA] Making request for [MX] Successful request for [MX] Successful request for [CA] Successful request for [US] 

我怎样才能得到延期的对象排队这些为我？ 我试着改变pipe道，但得到相同的结果。

这是所需的结果：

 Making request for [US] Successful request for [US] Making request for [CA] Successful request for [CA] Making request for [MX] Successful request for [MX] 

编辑：

我很欣赏使用数组来存储请求参数的build议，但jQuery的延迟对象有排队请求的能力，我真的很想学习如何充分利用这个function。

这实际上是我想要做的：

 when(request[0]).pipe(request[1]).pipe(request[2])... pipe(request[N]); 

但是，为了有效地使用每个遍历，我想一次一步地将请求分配到pipe道中：

 deferred.pipe(request[0]); deferred.pipe(request[1]); deferred.pipe(request[2]); 

Answer 1

用一个自定义的对象

 function DeferredAjax(opts) { this.options=opts; this.deferred=$.Deferred(); this.country=opts.country; } DeferredAjax.prototype.invoke=function() { var self=this, data={country:self.country}; console.log("Making request for [" + self.country + "]"); return $.ajax({ type: "GET", url: "wait.php", data: data, dataType: "JSON", success: function(){ console.log("Successful request for [" + self.country + "]"); self.deferred.resolve(); } }); }; DeferredAjax.prototype.promise=function() { return this.deferred.promise(); }; var countries = ["US", "CA", "MX"], startingpoint = $.Deferred(); startingpoint.resolve(); $.each(countries, function(ix, country) { var da = new DeferredAjax({ country: country }); $.when(startingpoint ).then(function() { da.invoke(); }); startingpoint= da; }); 

小提琴http://jsfiddle.net/7kuX9/1/

为了更清楚一点，最后一行可以写出来

 c1=new DeferredAjax( {country:"US"} ); c2=new DeferredAjax( {country:"CA"} ); c3=new DeferredAjax( {country:"MX"} ); $.when( c1 ).then( function() {c2.invoke();} ); $.when( c2 ).then( function() {c3.invoke();} ); 

用pipe道

 function fireRequest(country) { return $.ajax({ type: "GET", url: "wait.php", data: {country:country}, dataType: "JSON", success: function(){ console.log("Successful request for [" + country + "]"); } }); } var countries=["US","CA","MX"], startingpoint=$.Deferred(); startingpoint.resolve(); $.each(countries,function(ix,country) { startingpoint=startingpoint.pipe( function() { console.log("Making request for [" + country + "]"); return fireRequest(country); }); }); 

http://jsfiddle.net/k8aUj/1/

编辑：在结果窗口输出日志的小提琴http://jsfiddle.net/k8aUj/3/

每个pipe道调用都会返回一个新的promise，这个promise又被用于下一个pipe道。 请注意，我只提供了sccess函数，应该为失败提供类似的函数。

在每个解决scheme中，Ajax调用都被延迟到需要时，通过将它们包装在一个函数中，并为列表中的每个项目创build一个新的承诺来构build链。

我相信自定义对象提供了一个更容易的方式来操纵链，但pipe道可以更好地适合你的口味。

注意 ：从jQuery 1.8开始， deferred.pipe()是不推荐使用的， deferred.thenreplace它。

Answer 2

注意：从jquery 1.8开始，你可以使用.pipe而不是.pipe 。 .pipe函数现在返回一个新的promise，而.pipe已被弃用，因为它不再需要。 请参阅promises规范 ，了解有关承诺的更多信息，以及q.js，它提供了一个没有jQuery依赖关系的更简洁的JavaScript承诺库。

 countries.reduce(function(l, r){ return l.then(function(){return getData(r)}); }, $.Deferred().resolve()); 

如果你喜欢使用q.js：

 //create a closure for each call function getCountry(c){return function(){return getData(c)};} //fire the closures one by one //note: in Q, when(p1,f1) is the static version of p1.then(f1) countries.map(getCountry).reduce(Q.when, Q()); 

原始答案：

又一根烟斗; 不是为了胆小鬼，而是为了一点点紧凑：

 countries.reduce(function(l, r){ return l.pipe(function(){return getData(r)}); }, $.Deferred().resolve()); 

减less文档可能是开始理解上面的代码如何工作的最好的地方。 基本上，它有两个参数，一个callback和一个初始值。

callback迭代地应用于数组的所有元素，其中第一个参数是前一次迭代的结果，第二个参数是当前元素。 这里的诀窍是getData()返回一个jQuery延期承诺 ，并且pipe道确保在当前元素上调用getData之前，前一个元素的getData完成。

第二个参数$.Deferred().resolve()是一个已parsing延迟值的习惯用法。 它被馈送到callback执行的第一次迭代，并确保第一个元素上的getData被立即调用。

Answer 3

我不确定你为什么要这样做，但保留一个你需要请求的所有URL的列表，并且不要求下一个，直到你的success函数被调用。 IE， success将有条件地使额外的电话deferred 。

Answer 4

我知道我迟到了，但我相信你的原代码基本上没问题，但有两个（也许是三个）问题。

你的getData(country)正在被调用，因为你如何编码你的pipe道参数。 getData()是立即执行，结果（ajax的承诺，但http请求立即开始）作为parameter passing给pipe() 。 所以不是传递一个callback函数，而是传递一个对象 – 这将导致pipe道的新延迟被立即解决。

我认为这是需要的

 deferred.pipe(function () { return getData(country); }); 

现在，它是一个callback函数，当pipe道的父级延迟已被解决时，将被调用。 用这种方法编码会引起第二个问题。 getData（）将不会执行，直到parsing主体。

潜在的第三个问题可能是，因为所有的pipe道都会被连接到延迟的主服务器上，所以你并不是真的有一个链，我想知道它是否可以在同一时间全部执行它们。 文档说，callback是按顺序执行的，但是由于你的callback函数返回一个promise并且运行asynchronous，所以它们可能仍然有些并行执行。

所以，我觉得你需要这样的东西

 var countries = ["US", "CA", "MX"]; var deferred = $.Deferred(); var promise = deferred.promise(); $.each(countries, function(index, country) { promise = promise.pipe(function () { return getData(country); }); }); deferred.resolve(); 

Answer 5

更新： deferred.pipe已弃用

这是jQuery API中已经logging的很多代码。 请参阅http://api.jquery.com/deferred.pipe/

你可以保持pipe道，直到所有100个制成。

或者，我写了一些东西来进行N个调用，然后用所有已经调用的数据parsing一个函数。 注意：它返回的数据不是超级XHR对象。 https://gist.github.com/1219564

Answer 6

我用jQuery队列取得了成功。

 $(function(){ $.each(countries, function(i,country){ $('body').queue(function() { getData(country); }); }); }); var getData = function(country){ $.ajax({ url : 'ajax.jsp', data : { country : country }, type : 'post', success : function() { // Que up next ajax call $('body').dequeue(); }, error : function(){ $('body').clearQueue(); } }); };