循環中有多個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 。