循环中有多个AJAX调用

Question

I need a way to send multiple AJAX calls at the same time in Javascript/Angular. After some searching i couldn't find an answer. What i want to do is send all my requests as fast as possible. If i execute my calls in a for loop or in a queue of promises with the $q library in Angular, a request gets sent, waits for it to execute the callback, and then sends the next one. This is a example code:

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 is a angular resource with a get method which requires a ID.

What i want is that they all get sent at the same time and they call their callback when ready. The order in which the calls get returned doesn't really matter.

Thanks

Answer 1

Think outside the box with Web Workers

An interesting aproach to solve this question, is to use web workers to execute the requests in a different thread . if you are not familiar with web workers i advice you to start by this great tutorial of techsith . Basically, you will be able to execute multiple jobs at the same time. See also the W3Schools Documentation .

This article from Html5Rocks teach us how to use Web Workers without a separate script file.

Answer 2

Have you tried using Async.js module?

You can achieve desired behavior using something like

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

From Doc :

each(coll, iteratee, [callback])

Applies the function iteratee to each item in coll, in parallel. The iteratee is called with an item from the list, and a callback for when it has finished. If the iteratee passes an error to its callback, the main callback (for the each function) is immediately called with the error.

Answer 3

The $http service sends XHRs in parallel. The code below demostrates 10 XHRs being sent to httpbin.org and subsequently being received in a different order.

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

The DEMO on JSFiddle .