javascript - ReactJS 加载状态数据，优化

Question

我是 ReactJS 的新手，将它与 Django Rest Framework (DRF) 一起使用

def MyModel(model):
    ...
    status = ChoiceField(['new', 'in progress', 'completed'...])

在我的应用程序中，每个州都有单独的部分。所以数据需要分开。 我的问题是有很多不同的状态，大约有 6 或 7 个。

所以我为每个状态使用了不同的路线。/new、/inprogress 等。但这每次会导致大约 7 个请求，而不是 1 个。

loadMymodelsFromServer: function () {
    this.loadNewMymodelsFromServer();
    this.loadAssignedMymodelsFromServer();
    this.loadAllocatedMymodelsFromServer();
    this.loadDraftMymodelsFromServer();
    this.loadPublishedMymodelsFromServer();
    this.loadArchivedMymodelsFromServer()
    this.loadSponsoredMymodelsFromServer();
    this.loadCurrentUserMymodelsFromServer();
},

loadNewMymodelsFromServer: function() {
    var url = this.props.url + "/new/";
    $.ajax({
        url: url,
        dataType: 'json',
        cache: false,
        success: (function (data) {
            this.setState({ new_mymodels: data });
        }).bind(this),
        error: (function (xhr, status, err) {
            console.error(url, status, err.toString());
        }).bind(this)
    });
},

数据必须刷新几次，比如删除操作和更新操作，因为 JS 数组不能很好地支持这些操作。

在一个巨大的请求中加载所有未排序的数据并在 JS for 循环中对其进行排序会更好吗？

感觉不对，因为我知道数据库已针对这样的查询参数进行了优化，而不是 Javascript，所以我做错了什么？

Answer 1

您可以只进行一次 ajax 调用，将所有 7 个结果作为一个对象返回，而不是进行 7 个单独的 ajax 调用。

新的 ajax 调用的服务器处理程序可以调用其他 7 个查询并将结果收集到一个对象中。

这是服务器的一些伪代码:

function megaQueryHandler() {
    var result = {
       query1Data: query1Handler(),
       query2Data: query2Handler(),
       ...
    };

    return result;
}

然后您的客户只需调用一次此“大型查询”即可。