如何在重试-Ajax场景中消除这个丑陋的重复代码？

Question

由于getGamesByPlayerId的回调调用性质（恰好是Ajax调用），我似乎无法弄清楚如何消除以下重复代码：

// Load the player's games.
gc.api.getGamesByPlayerId(gc.game.player.id, gc.game.player.access_token, function(data) {

    if(data.status_code === 401) {

        // Call may have failed due to being called too fast. Retry...
        gc.api.getGamesByPlayerId(gc.game.player.id, gc.game.player.access_token, function(data) {

            if(data.status_code === 401) {

                // Call may have failed due to being called too fast. Retry...
                gc.api.getGamesByPlayerId(gc.game.player.id, gc.game.player.access_token, function(data) {

                    if(data.status_code === 401) {

                        // Call may have failed due to being called too fast. Retry...
                        gc.api.getGamesByPlayerId(gc.game.player.id, gc.game.player.access_token, function(data) {

                            if(data.status_code === 401) {

                                // OK. It's safe to assume the server is current, and that
                                // we truly are not authorized to do this.
                                alert("You are not authorized.");

                            } else {

                                // Add games to HTML.
                                for( var i = 0; i < data.length; i++ ) {

                                    var html = '<li><a href="?g=' + data[i].id + '">' + data[i].id + '</a></li>';

                                    $('#games').append(html);

                                }

                            }

                        });

                    } else {

                        // Add games to HTML.
                        for( var i = 0; i < data.length; i++ ) {

                            var html = '<li><a href="?g=' + data[i].id + '">' + data[i].id + '</a></li>';

                            $('#games').append(html);

                        }

                    }

                });

            } else {

                // Add games to HTML.
                for( var i = 0; i < data.length; i++ ) {

                    var html = '<li><a href="?g=' + data[i].id + '">' + data[i].id + '</a></li>';

                    $('#games').append(html);

                }

            }

        });

    } else {

        // Add games to HTML.
        for( var i = 0; i < data.length; i++ ) {

            var html = '<li><a href="?g=' + data[i].id + '">' + data[i].id + '</a></li>';

            $('#games').append(html);

        }

    }

});

通常情况下，我会考虑使用for循环，但这不起作用，因为我不想快速连续启动Ajax调用。我希望只有在前面的调用失败时才重启。

Answer 1

忽略连续多次发出相同请求所需的环境，您可以通过使用递归函数来实现此目的。例如，像：

loadPlayerGames(4);

function loadPlayerGames(triesLeft) {
    gc.api.getGamesByPlayerId(gc.game.player.id, gc.game.player.access_token, function(data) {
        if(data.status_code !== 401) {
            // Add games to HTML.
            for( var i = 0; i < data.length; i++ ) {
                var html = '<li><a href="?g=' + data[i].id + '">' + data[i].id + '</a></li>';
                $('#games').append(html);
            }
        } else if(triesLeft <= 0) {
            // OK. It's safe to assume the server is current, and that
            // we truly are not authorized to do this.
            alert("You are not authorized.");
        } else {
            // Call may have failed due to being called too fast. Retry...
            loadPlayerGames(triesLeft - 1);
        }
    });
}