顺序执行动态数量的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

不确定您是否已经弄清楚了，但是解决您的问题的一个好方法是使用 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 2

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

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，可以用任何函数替换），一个返回承诺的函数。

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

Answer 3

递归调用怎么样。创建一个参数化函数并将日期传递给函数，例如，

函数获取详细信息（天）{

//  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 
})