c# - 在一个视图/页面中实现多个并发 Ajax 请求的最佳方法是什么？

问题描述

在数据驱动的 Web 应用程序中，我有几个 razor 视图，其中包含使用tabulator创建的表，并使用间隔内的自调用 ajax 函数进行更新。在大多数视图中，表的数量不超过三个，并且网络性能和更新之间的延迟相当快。我目前正在创建一个包含六个表的视图，并且看到丢弃请求的增加、数据的停滞以及似乎直接归因于页面上并发请求数量增加的总体缓慢。我绝不是 JavaScript 或 MVC 专家，我正在尝试调查我的代码是否只是效率低下，或者方法本身是否错误。

本质上，每个制表器表都有一个 ajax 函数，该函数将访问 MVC 层的端点，该端点路由到 WebApi2 端点以检索最新数据，最后，使用制表器加载函数之一将数据加载到表中。数据端是使用实体框架的 SQL。我已经尝试了几个围绕这个过程构建的实现，但下面是我目前使用的方法。

    // Function for waiting in between calls
    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
    // Function for getting data from endpoint
    async function fetch() {
        $.ajax({
            type: "GET",
            url: www.mydata.com,
        }).done(async function (data) {
            // Tabulator function for replacing existing data with new
            table.replaceData(data);
            await sleep(10000);
            fetch();
            }).fail(async function () {
                await sleep(10000);
                fetch();
        })
    }
    // Call the fetch function the first time, self calls afterwards
    fetch();

视图中的每个表都运行上述代码片段的一个版本。我添加了睡眠功能，希望在请求之间引入一些延迟。还值得指出的是，在 ASP.NET MVC 层，拥塞也增加了。由于所有其他请求来回飞来飞去，因此服务用户创建新实体的请求需要更长的时间。

标签： c#ajaxasp.net-mvcentity-frameworktabulator

解决方案

要将请求分散到服务器，您可以选择更改表的配置方式。

我假设目前您正在使用ajaxURL属性来设置表格 url，这将导致表格在加载时发出请求。

var table = new Tabulator("#example-table", {
    ajaxURL:"http://www.getmydata.com/now", //ajax URL
});

这将导致所有六个表同时发出请求。

您可以采取几种不同的方法

延迟请求

您可以改为将此字段保留在表定义之外（导致它在加载时有一个空表，然后稍后使用setData函数加载数据。您可以将其包装在一个setTimeout函数中：

//wait one second before loading data
setTimeout(function(){
    table.setData("http://www.getmydata.com/now");
}, 1000);

如果您为每个表设置不同的超时时间，它们将以交错的方式加载。

捆绑请求

您可以在向检索所有数据的服务器发出的单个 ajax 请求中自己检索数据，而不是允许表检索其数据，然后使用setData函数将其捆绑到表中。

虽然如果您正在加载大量数据，这可能会导致您延迟。

渐进式加载

如果您尝试传输大量数据，这肯定会减慢请求速度。

在这些情况下，使用 tabulator 的ajaxProgressiveLoad功能可以让您对数据进行分页，并将其以较小的块一个接一个地发送到表中，这样不会长时间占用您的服务器：

var table = new Tabulator("#example-table", {
    ajaxURL:"http://www.getmydata.com/now", //ajax URL
    ajaxProgressiveLoad:"load", //sequentially load all data into the table
});