使用同步请求客户端->服务器的技术

Question

我正在使用 thegamesdb.com 的 API 来获取所有游戏平台和每个平台上的所有游戏。 目前，我从一个空白页面开始，在 document.ready 上，我对服务器进行 AJAX 调用以获取所有平台。然后我必须为每个平台进行另一个 AJAX 调用以获取该平台上的游戏计数（例如，PC 有 2342 个游戏，XBOX 有 453 个游戏，...）。 我也这样做的原因是为用户提供一个进度条（0-100％）并在平台的总游戏中显示游戏数量： /

所以在这些 API 调用之后，我应该有一个所有平台的列表，可以单击这些平台来启动另一个服务器端调用，为每个游戏进行 api 调用，以获取它的数据。当一个平台被点击时，客户端每次都会发送一个新的调用，以便服务器将游戏数据放入数据库中。然后我们做gamecounter++。

我已经尝试通过对服务器的 AJAX 调用来做到这一点：

$.getJSON($('#platformlist').data('url-getplatforms'), function (data) {
    self.platforms = $.map(data, function(p) { return new Platform(p); });
    console.log(self.platforms);
    $.each(self.platforms, function () {
        console.log(this);
        $.getJSON($('#platformlist').data('url-getplatformgames'), { platformId: this.id }, function (platformgamesdata) {
            this.countGamesDone = 0;
            $.each(platformgamesdata, function() {
                this.games.push(new PlatformGame(this));
                this.countGames++;
            });

        });
    });
});

但由于这是异步的，因此无法显示进度，只会使浏览器加载，直到所有游戏都在数据库中而没有任何反馈。 我可以将 AJAX 设置为 async:false，但我读到还有其他方法可以做到这一点，但没有人说如何做到这一点。

这样做的其他选择是什么？我对使用什么技术没有任何限制。这是一个 ASP.NET MVC 5 应用程序。如果这可以简化这一点，我可以使用 javascript、c#、signalr、jquery 和任何其他 javascript 库。

Answer 1

为什么不能显示浮动的loading 消息？

$('#bigFatLoadingMessage').show();

$.getJSON($('#platformlist').data('url-getplatforms'), function (data) {
    self.platforms = $.map(data, function(p) { return new Platform(p); });
    $.each(self.platforms, function () {

        //update overlay message
        $('#bigFatLoadingMessage').html('Loading platform ' + this.name);

        $.getJSON($('#platformlist').data('url-getplatformgames'), { platformId: this.id }, function (platformgamesdata) {
            this.countGamesDone = 0;
            $.each(platformgamesdata, function() {
                this.games.push(new PlatformGame(this));
                this.countGames++;
            });

        });
    });

    $('#bigFatLoadingMessage').hide();
});