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

【问题标题】：What is the best way to implement several concurrent Ajax request in one view/page?在一个视图/页面中实现多个并发 Ajax 请求的最佳方法是什么？
【发布时间】：2019-11-09 00:01:43
【问题描述】：

在一个数据驱动的 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();

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

【问题讨论】：

你将什么传回视图？ ViewModel 只包含所需的字段，还是包含整个实体？一页上的 6 个表不应该破坏银行，但我会仔细查看正在发出的请求数量，以及在服务器端触发的查询数量和类型。对于像搜索条件这样的查找，我希望将它们组合成一个请求。对于搜索，请确保您对请求进行去抖动以避免不必要的往返。关键点是努力不发送比您需要的信息更多的信息，而不是您需要的频率。

标签： c# ajax asp.net-mvc entity-framework tabulator

【解决方案1】：

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

我现在假设您正在使用 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 函数。

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

渐进式加载

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

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

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

有关此选项的更多详细信息，请参阅Progressive Ajax Loading Documentation

【讨论】：