javascript - Ajax GET : multiple data-specific calls, 或更少的特定调用？

Question

我正在开发一个网络应用程序，使用 Node.js/express 后端和 MongoDB 作为数据库。

以下示例用于管理仪表板页面，我将在其中显示包含与网站用户相关的不同信息的卡片。我可能想在示例页面上显示 - 例如:

1. 各类用户数量
2. 每种用户类型最常见的位置
3. 每个月有多少注册
4. 最受欢迎的职位

我可以在一个路径中完成这一切，我有一个执行所有这些任务的 Controller ，并将它们作为一个对象捆绑到一个 url，然后我可以使用 ajax 从该 url 中提取数据。或者，我可以将每个任务拆分到它自己的路由/ Controller 中，对每个任务进行单独的 ajax 调用。我要决定的是在单个页面上进行多个 ajax 调用的最佳做法是什么。

---

示例:

我正在构建一个页面，我将在其中使用 DataTables 制作一个交互式表格针对不同类型的用户(目前有两个:mentors 和 mentees)。此示例仅需要两个数据请求(每个用户类型一个)，但我的最终页面将更像是 10 个。

对于每种用户类型，我正在为每种用户类型进行 ajax get 调用，并根据返回的数据构建表:

用户类型 1 - 学员

$.get('/admin/' + id + '/mentees')
    .done(data => {
        $('#menteeTable').DataTable( {
            data: data,
            "columns": [
                { "data": "username"},
                { "data": "status"}
            ]
        });
    })

用户类型 2 - 导师

$.get('/admin/' + id + '/mentors')
    .done(data => {
        $('#mentorTable').DataTable( {
            data: data,
            "columns": [
                { "data": "username"},
                { "data": "position"}
            ]
        });
    })

然后这需要在我的 Node.js 后端中使用两条路由:

router.get("/admin/:id/mentors", getMentors);
router.get("/admin/:id/mentees", getMentees);

还有两个结构相同的 Controller (但针对不同的用户类型进行过滤):

getMentees(req, res, next){
    console.log("Controller: getMentees");
    let query = { accountType: 'mentee', isAdmin: false };
    Profile.find(query)
        .lean()
        .then(users => {
            return res.json(users);
        })
        .catch(err => {
            console.log(err)
        })
}

这很好用。但是，由于我需要发出多个数据请求，所以我想确保以正确的方式构建它。我可以看到几个选项:

1. 对每种数据类型进行单独的 ajax 调用，并在后端做任何繁重的工作(例如统计用户类型和返回)- 如上所述
2. 为每种数据类型进行单独的 ajax 调用，但在前端完成繁重的工作。在上面的示例中，我可以很容易地从我的 ajax 调用返回的 data 上过滤掉 isAdmin 用户
3. 减少请求不太精确数据的 ajax 调用。在上面的示例中，我可以为所有用户进行一次调用(只需要一个路由/ Controller )，然后在前端过滤 data 以构建两个表

我希望就采购数据所花费的时间

而言，哪种策略最有效，我希望得到一些建议

---

更新

为了澄清这个问题，我可以使用类似这样的 Controller 设置获得与上述相同的结果:

Profile.find(query)
    .lean()
    .then(users => {
        let mentors = [],
        mentees = []

        users.forEach(user => {
            if(user.accountType === 'mentee') {
                mentees.push(user);
            } else if (user.accountType === 'mentor') {
                mentors.push(user);
            }
        });
        return res.json({mentees, mentors});
    })

然后进行一次 ajax 调用，并相应地拆分数据。我的问题是:哪个是首选？

Answer 1

长话短说:选项 1

IMO 我不会将未处理的数据提供给前端，事情可能会出错，你可以透露太多，未指定的客户端机器可能需要很多时间来处理(可能是带宽有限的低功率设备和电池电量)，你想要一个流畅的用户体验，而客户端上的 javascript 从大量数据中提取信息会损害这一点。我使用后端进行处理(根据需要准备信息)，JS 用于检索信息并将信息(AJAX)放在页面上以及切换元素状态之类的东西，CSS 用于任何移动(动画和过渡等) ) 在求助于 JS 之前尽可能多地使用。 同样对于路由，我的方法是每个不同的信息包 (dataTable) 都有一个路由，所以你不会重载一个有太多用途的方法，保持简单和可维护。你总是可以抽象出任何相同且经常重复的东西。

因此，为了回答您的问题，我会选择选项 1。 您还可以提供单个“页面加载”端点，然后如果有任何更改，稍后使用它们不同的端点更新各个表。这个初始的“页面加载”调用可以整理来自后端端点的信息，并作为一个数据包来最初填充所有表。一个包含大量定义明确的数据的初始请求，然后能够在用户请求时更新单个表(或者如果您进入该表，则有一个推送)。