如何制作一个干净的异步循环？

Question

遵循典型的REST标准,我将资源分解为单独的端点和调用.这里的问题主要有两个对象List和Item(当然,名单有项目的列表,以及与之相关的一些其他数据).

因此,如果用户想要检索他的列表,他可能会发出Get请求 api/Lists

然后,用户可能希望获取其中一个列表中的项目,并在上一次调用中创建一个Get to api/ListItems/4where 4 List.listId.

这一切都很好:让我指向回调方法的options.complete属性$.ajax,所以我可以简化这两个事件.

但是如果我想获得所有列表中的元素,事情会变得非常混乱.例如,假设我有一个调用库函数makeGetRequest,它接收终点和回调函数,以使代码更清晰.简单地以天真的方式检索3个元素会导致:

var success1 = function(elements){
    var success2 = function(elements){
       makeGetRequest("api/ListItems/3", finalSuccess);
    }
    makeGetRequest("api/ListItems/2", success2);
}
makeGetRequest("api/ListItems/1", success1);

恶心!这是编程101中的那种东西,我们在手腕上划过并指向循环.但是如何通过循环实现这一点,而不必依赖外部存储？

for(var i : values){
    makeGetRequest("api/ListItems/" + i, successFunction);
}

function successFunction(items){
    //I am called i-many times, each time only having ONE list's worth of items!
}

即使有存储空间,我也必须知道所有数据何时完成并检索数据,并调用一些主函数来检索所有收集的数据并对其进行处理.

有处理这个的做法吗？这之前必须多次解决......

Answer 1

尝试使用端点参数堆栈：

var params = [];
var results [];

params.push({endpoint: "api/ListItems/1"});
params.push({endpoint: "api/ListItems/2"});
params.push({endpoint: "api/ListItems/3"});
params.push({endpoint: "api/ListItems/4"});

然后您可以在成功处理程序中使其递归：

function getResources(endPoint) {

   var options = {} // Ajax Options
   options.success = function (data) {
       if (params.length > 0) {
           results.push({endpoint: endpoint, data: data});
           getResources(params.shift().endpoint);
       }
       else {
          theMasterFunction(results)
       }
   }

   $.get(endPoint, options)
}

您可以通过一次调用来启动它，如下所示：

getResources(params.shift().endpoint);

编辑：

为了使所有内容保持独立且不在全局范围内，您可以使用函数并提供回调：

function downloadResources(callback) {

    var endpoints = [];
    var results [];

    endpoints.push({endpoint: "api/ListItems/1"});
    endpoints.push({endpoint: "api/ListItems/2"});
    endpoints.push({endpoint: "api/ListItems/3"});
    endpoints.push({endpoint: "api/ListItems/4"});

    function getResources(endPoint) {
        var options = {} // Ajax Options
        options.success = function (data) {
           if (endpoints.length > 0) {
               results.push({endpoint: endpoint, data: data});
               getResources(endpoints.shift().endpoint);
           }
           else {
              callback(results)
           }
        }
       $.get(endPoint, options)
    }

    getResources(endpoints.shift().endpoint);

}

正在使用：

downloadResources(function(data) {
   // Do stuff with your data set
});