循环中有多个AJAX调用

Question

我需要一种方法在Javascript / Angular中同时发送多个AJAX调用。 经过一番搜索，我找不到答案。 我想要做的是尽快发送我的所有请求。 如果我使用Angular中的$ q库在for循环或promises队列中执行我的调用，则会发送一个请求，等待它执行回调，然后发送下一个。 这是一个示例代码：

var array = [];
    Page.get({id:1}, function(result){
        for(var i = 0; i < result.region[0].hotspots.length; i++){
            var promise = Hotspot.get({id: result.region[0].hotspots[i].id});
            array.push(promise);
        }
        $q.all(array).then(function(data){
            console.log(data);
        });
    });

Page是一个带有get方法的角度资源，需要ID。

我想要的是他们都在同一时间被发送，他们准备好后回拨他们的回叫。 返回调用的顺序并不重要。

谢谢

Answer 1

与Web Workers一起思考

解决这个问题的一个有趣的方法是使用Web worker在不同的线程中执行请求。 如果你不熟悉网络工作者，我建议你从这个伟大的技术教程 开始 。 基本上，您将能够同时执行多个作业。 另请参阅W3Schools文档 。

来自Html5Rocks的这篇文章教我们如何在没有单独的脚本文件的情况下使用Web Workers。

Answer 2

您是否尝试过使用Async.js模块？

您可以使用类似的方式实现所需的行为

Page.get({id:1}, function(result){
    async.each(result.region[0].hotspots, callAsync, function(err, res){
        console.log(res);
    }
});

function callAsync(hotspot, callback){
    callback(null, Hotspot.get({id: hotspot.id});
}

来自Doc：

每个（coll，iteratee，[callback]）

将函数iteratee并行应用于coll中的每个项目。 使用列表中的项目调用iteratee，并在完成时调用它。 如果iteratee将错误传递给其回调，则会立即调用主回调（对于每个函数）并显示错误。

Answer 3

$http服务并行发送XHR。 下面的代码演示了10个XHR被发送到httpbin.org并随后以不同的顺序接收。

angular.module('myApp').controller('myVm', function ($scope, $http) {
    var vm = $scope;
    vm.sentList = [];
    vm.rcvList = [];
    //XHR with delay from 9 to 1 seconds
    for (var n=9; n>0; n--) {
        var url = "https://httpbin.org/delay/" + n;
        vm.sentList.push(url);
        $http.get(url).then(function (response) {
             vm.rcvList.push(response.data.url);
        });
    };
    //XHR with 3 second delay
    var url = "https://httpbin.org/delay/3";
    vm.sentList.push(url);
    $http.get(url).then(function (response) {
         vm.rcvList.push(response.data.url);
    })
})

JSFiddle上的DEMO 。