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

How can I eliminate this ugly duplicate code during a retry-Ajax scenario?

本文关键字:代码 重试 Ajax      更新时间:2023-09-26

由于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 调用。我希望仅在上述调用失败时触发重试。

忽略需要连续多次发出相同请求的情况,您可能可以使用递归函数来实现这一点。例如,类似这样的内容:

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