顺序执行动态数量的ajax请求

Question

有以下情况：

我必须显示给定间隔的图形（startDate，endDate）

因为间隔可能很大，所以每天都会检索数据，因此我需要顺序执行多个ajax调用，并将数据附加到图形上（highcharts）

示例间隔为n天==>

ajax request day 1 

when is (done) ready ajax request day 2

when is (done) ready ajax request day 3

....

ajax request day n

我阅读了有关延期的内容，并保证我发现动态天数和按顺序获取响应的要求很难

谢谢

Answer 1

如果您能够将日期列表存储在数组中，则可以使用以下方法：

var items = ['Apple', 'Orange', 'Banana', 'Alphalpha'];

//replaceable with any function that returns a promise
function asyncFunction(item) { 
  return $.ajax({
    url: '/echo/html',
    type: 'POST',
    data : item
  })
  .then(function(data){
    $('body').append('<div>Got the response from '+item+'</div>');
    //stuff stuff stuff
  });
}

function sequence(arr, callback) {
  var i=0;

  var request = function(item) {

    return callback(item).then(function(){

      if (i < arr.length-1)
            return request(arr[++i]);

    });
  }

  return request(arr[i]);
}

sequence(items, asyncFunction).then(function(){
    $('body').append('<div>Done with all!</div>');
});

https://jsfiddle.net/7ojy9jnx/2/

基本上， sequence接受一个项目Array ，并在所有项目上运行一个函数（在本例中为asyncFunctions ，可以用任何函数替换），一个返回promise的函数。

您会注意到，这是非常基本的实现，例如，它没有错误处理。 像async.js这样的库中有详尽的工具列表，可以完成这样的任务，但是谁知道呢，也许就足够了。

Answer 2

不确定是否已经解决了问题，但是解决问题的一种好方法是结合使用jQuery.Deferred和递归。 查看此示例代码，看看它是否有助于澄清问题：

 function getData(dayLimit) { var allDone = $.Deferred(); var getDataForDay = function(day) { doAsyncThing(day).done(function() { if (day < dayLimit) { getDataForDay(day + 1); } else { allDone.resolve(); } }).fail(function(){ /* Reject the deferred if one of your operations fails. Useful if you're binding "fail" or "always" callbacks to the promise returned by getData. */ allDone.reject(); }); }; getDataForDay(1); //start with first day return allDone.promise(); } 

让我知道是否需要进一步说明，非常乐意提供帮助！

Answer 3

递归调用呢？ 创建一个参数化函数并将日期传递给该函数，例如，

函数getDetails（day）{

//  ajax call
//  In the callbacks call the getDetails function by updating the date

}

Answer 4

如果您在应用程序中使用Jquery，请尝试将所有ajax推入数组

前[ajax，ajax，...]

然后用户

$.when([ajax,ajax,...]).then(function(){
 console.log(arguments);// you will get the success messages in arguments array 
})