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

Question

对于我的类似问题，我找到了其他答案，但没有一个对我有用。

我正在尝试制作纸牌游戏。在这里，我尝试洗牌并给每个玩家 5 张随机的金钱卡 ( $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 函数应该返回 promise。

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

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

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

然后您的迭代循环应该链接这些 promise 。

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

请记住，在链接 promise 时，您应该始终返回一些东西给 .then 方法。

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

AngularJS 团队已经意识到并弃用了 .success。我们现在都应该使用 .then 方法。要了解有关 .success 和 .error 弃用(或者我应该说失败)的更多信息，请参阅最新的 AngularJS $http API Docs .

要了解有关 $q.when 的更多信息，请查看 AngularJS $q Service API Docs .