异步请求进入for循环angular.js

Question

我有一个数组，我需要通过http post请求将数组的值一一发送到webservice。对于 node.js ，我正在使用“async”包来做到这一点，例如：async.eachSeries 做得很好，我怎样才能为 angular.js 做同样的事情，我的正常异步代码；

//this code sends all queries of array (maybe  5.000 request at same time , it is hard to process for webservice :=) ) at same time and wait for all responses. 
//it works but actually for me , responses should wait others at end of loop should work one by one 
//like async.eachSeries module!

    for (var i = 0; i < myArr.lenght; i++) {
        (function (i) {
                var data = {
                    "myQuery": myArr[i].query
                };
                $http.post("/myServiceUrl", data).success(function (result) {
                    console.log(result);
                });
        })(i);
}

Matt Way 和 Chris L 都回答 Correct ，您可以研究 Chris 的回答以了解 for 循环中的异步同步功能。

Answer 1

您可以使用 $q 通过将 Promise 链接在一起来创建类似的需求。例如：

var chain = $q.when();
angular.forEach(myArr, function(item){
    chain = chain.then(function(){
        var data = {
            myQuery: item.query
        };
        return $http.post('/myServiceUrl', data).success(function(result){
            console.log(result);
        });
    });
});

// the final chain object will resolve once all the posts have completed.
chain.then(function(){
    console.log('all done!');
});

基本上你只是在前一个承诺完成后运行下一个承诺。根据您的问题，在此强调每个请求都将等到前一个请求完成。

Answer 2

function logResultFromWebService(value)
{
    $http.post("/myServiceUrl", value).success(console.log);
}

angular.forEach(myArray, logResultFromWebService);

Answer 3

如果我正确理解您的问题。您希望以同步方式运行 for 循环，以便下一次迭代仅在前一次迭代完成后发生。为此，您可以使用同步循环/回调。特别是如果订单很重要。

        var syncLoop = function (iterations, process, exit) {
            var index = 0,
                done = false,
                shouldExit = false;
            var loop = {
                next: function () {
                    if (done) {
                        if (shouldExit && exit) {
                            return exit(); // Exit if we're done
                        }
                    }
                    // If we're not finished
                    if (index < iterations) {
                        index++; // Increment our index
                        process(loop); // Run our process, pass in the loop
                        // Otherwise we're done
                    } else {
                        done = true; // Make sure we say we're done
                        if (exit) exit(); // Call the callback on exit
                    }
                },
                iteration: function () {
                    return index - 1; // Return the loop number we're on
                },
                break: function (end) {
                    done = true; // End the loop
                    shouldExit = end; // Passing end as true means we still call the exit callback
                }
            };
            console.log('running first time');
            loop.next();
            return loop;
        }

对于您的特定实施：

    syncLoop(myArray.length, function (loop) {
        var index = loop.iteration();
        var data = {
            "myQuery": myArray[index].query
        };
        $http.post("/myServiceUrl", data).success(function (result) {
            console.log(result);
            loop.next();
        });
    }, function () {
        console.log('done');
    });

如果您打算对返回的数据执行某些操作（例如执行计算），则可以使用此方法执行此操作，因为您将按指定的顺序返回数据。

我在自己构建的统计计算网络应用中实现了类似的功能。

编辑：

为了说明我在使用 $q 时遇到的问题。当我设置了一个小提琴时。希望这将有助于说明我为什么这样做。

https://jsfiddle.net/chrislewispac/6atp3w8o/

使用 Matt 的回答中的以下代码：

var chain = $q.when(promise.getResult());
    angular.forEach(myArr, function (item) {
        chain = chain.then(function () {
            $rootScope.status = item;
            console.log(item);
        });
    });

    // the final chain object will resolve once all the posts have completed.
    chain.then(function () {
        console.log('all done!');
    });

这个小提琴是我的解决方案的一个例子：

https://jsfiddle.net/chrislewispac/Lgwteone/3/

比较 $q 版本和我的版本。查看控制台并想象那些被传递到用户界面以供用户干预流程和/或对顺序返回执行统计操作。

您会看到，无论是在控制台中还是在 Matt 的回答中的视图中，它都没有按顺序给出数字 1、2、3、4 等。它“批处理”响应，然后返回它们。因此，如果根据步骤 2 中的响应不运行步骤 3，则至少在提供的答案中，没有一种方法可以中断或显式控制此处的同步操作。当尝试执行顺序计算和/或允许用户控制断点等时，这会带来一个重大问题。

现在，我正在研究 $q 库和 Q 库，看看是否有更优雅的解决方案来解决这个问题。但是，我的解决方案确实按要求工作并且非常明确，这使我可以将功能放置在服务中并根据我的意愿对某些用例进行操作，因为我完全理解它在做什么。对我来说，这比使用库更重要（至少在我作为程序员的开发的这个阶段，我相信在 StackOverflow 上还有很多其他人处于同一阶段）。

Answer 4

如果发送顺序无关紧要

var items = [/* your array */];
var promises = [];
angular.forEach(items, function(value, key){
    var promise = $http.post("/myServiceUrl", { "myQuery": value.query });
    promises.push(promise);
});
return $q.all(promises);