Question

我找到了我的类似问题的其他答案，但没有一个能为我工作。

我正在尝试制作纸牌游戏。在这里，我试图通过卡片随机播放并给每个玩家5张随机的Money卡（$ scope.MoneyCards）。相反，这段代码为循环中的最后一个玩家提供了所有15张牌。

（Angular 1.0.8）的结果正是我想要的结果。但是，当我使用任何更高版本时，这不起作用。我正在努力迁移到1.4.8。

这是我正在使用的代码：

    $scope.StartGame = function() {
    $http.get('/api/MoneyCards')
        .success(function(data) {
            $scope.MoneyCards = data;
            console.log(data);

            // Loop through players
            player = 1;
            while(player < 4) {
            // Loop through money cards to give each player 5 cards
            i=0;
            while(i < 5) {
                // Shuffle
                var Mfloor = Math.floor(Math.random()*$scope.MoneyCards.length);
                $scope.randomCard = $scope.MoneyCards.splice(Mfloor, 1 );
                // Create the card in the Deck table and attach it to a player
                $scope.createDecks($scope.randomCard[0],player,0);
                i++;
            }
            player++;
        }

        })
        .error(function(data) {
            console.log('Error: ' + data);
        });
};

这是createDecks函数

$scope.createDecks = function(card, player, type) {

    $scope.formData.player = player;
    $scope.formData.type = type;
    $scope.formData.card = card;

    $http.post('/api/Decks', $scope.formData)
        .success(function(data) {
            $scope.formData = {};
            console.log(data);
        })
        .error(function(data) {
            console.log('Error: ' + data);
        });
};

我会尝试将此用于JSFiddle。

georgeawg使用$ q提供的代码仍然无效

    $scope.StartGame = function() {
    $http.get('/api/MoneyCards')
        .success(function(data) {
            $scope.MoneyCards = data;
            console.log(data);

            var player = 0;
            while(player < 3){
            var i = 0;
            var qPromise = $q.when(0);
                while(i < 5) {
                    // Shuffle
                    var Mfloor = Math.floor(Math.random()*$scope.MoneyCards.length);
                    var randomCard = $scope.MoneyCards.splice(Mfloor, 1 );
                    // Create the card in the Deck table and attach it to a player

                    qPromise = qPromise.then( function (response) {
                        return $q.all([
                            response,
                            $scope.createDecksPromise(randomCard[0],player,0)
                            ]);
                        });
                    i++;
                };
                player += 1;
            };

            qPromise.then ( function(response) {
                      //do whatever
                    console.log(response);
                 }) .catch ( function (error) {
                      throw error;
                 });

        })
        .error(function(data) {
            console.log('Error: ' + data);
        });
};

Answer 1

首先，您的createDecks功能返回承诺。

$scope.createDecksPromise = function(card, player, type) {

    var formData = {};
    formData.player = player;
    formData.type = type;
    formData.card = card;

    return $http.post('/api/Decks', formData);
};

然后，您的迭代循环应该链接这些承诺。

var i = 0;
var qPromise = $q.when([]);
while(i < 5) {
    // Shuffle
    var Mfloor = Math.floor(Math.random()*$scope.MoneyCards.length);
    var randomCard = $scope.MoneyCards.splice(Mfloor, 1 );
    // Create the card in the Deck table and attach it to a player
    // Add closure for randomCard and player 
    (function (randomCard, player) {
        qPromise = qPromise.then( function (response) {
            response.push(
                $scope.createDecksPromise(randomCard[0],player,0)
            );
            return $q.all(response);  
        });
    })(randomCard, player); 
    i++;
};

qPromise.then ( function(response) {
          //do whatever
     }) .catch ( function (error) {
          throw error;
     });

请记住，在链接承诺时，您应始终返回某些内容到.then方法。

另请注意，.then方法的响应结构与.success方法不同。

AngularJS团队已经醒悟并弃用.success。我们现在都应该使用.then方法。要详细了解.success和.error的弃用（或我应该说失败），请参阅最新的AngularJS $http API Docs。

要详细了解$q.when，请查看AngularJS $q Service API Docs。

Answer 2

我终于找到了答案，这里是代码：

$scope.StartGame = function() {
    $http.get('/api/MoneyCards')
        .success(function(data) {
            $scope.MoneyCards = data;
            console.log(data);

            var qPromise = [];
            var player = 1;
            while(player < 4){
            var i = 0;
                while(i < 5) {

                    qPromise.push([
                        Mfloor = Math.floor(Math.random()*$scope.MoneyCards.length),
                        randomCard = $scope.MoneyCards.splice(Mfloor, 1 ),
                        $scope.createDecksPromise(randomCard[0],player,0)
                    ]);

                    i++;
                };
                player += 1;
            };
            return $q.all(qPromise);

        })
        .error(function(data) {
            console.log('Error: ' + data);
        });
};

感谢georgeawg，$ http.post $scope.createDeckPromise()应该返回承诺：

$scope.createDecksPromise = function(card, player, type) {

    var formData = {};
    formData.player = player;
    formData.type = type;
    formData.card = card;

    return $http.post('/api/Decks', formData);
};

对于遇到同样问题的人。这是没有我的代码的解决方案：

$scope.RunCode(){
    var Promises = [];
    var i = 0;
    while (i < 5){
        Promises.push($http.post('/api/whatever', formData));
        // to add multiple functions to the promise use [], example: Promises.push([doThing1, doThing2]); 
        i++;
    };
    return $q.all(Promises);
}

如何使用AngularJS 1.4.8在循环内发布

2 个答案: