在 Datatable 中加载 JSON 数据需要很长时间答案

【问题标题】：Loading JSON data in Datatable takes too long在 Datatable 中加载 JSON 数据需要很长时间
【发布时间】：2019-04-10 02:11:23
【问题描述】：

我正在将 Laravel 和 Vue 用于我正在进行的项目。在我的仪表板中，我使用了 BootstrapVue 的名为 B-table 的数据表，它从我的 API 接收 JSON 数据。

API 目前只返回 1 个用户，但是即使它只有 1 行，加载它也需要相当长的时间。我创建了这个 GIF 来显示刷新网页时的加载时间：

我正在使用 Axios 从我的 API 接收数据，我很好奇是什么导致它这么慢。这是我的代码：

<template>
    <div>
        <div id="main-wrapper" class="container">
            <div class="row">
                <div class="col-md-12">
                    <hr>
                    <b-table busy.sync="true" show-empty striped hover responsive :items="users" :fields="fields" :filter="filter" :current-page="currentPage" :per-page="perPage" @refreshed="verfris">
                        <template slot="actions" slot-scope="data">
                            <a class="icon" href="#"><i class="fas fa-eye"></i></a>
                            <a class="icon" href="#"><i class="fas fa-pencil-alt"></i></a>
                            <a class="icon"><i class="fas fa-trash"></i></a>
                        </template>
                    </b-table>
                    <b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0 pagination-sm" />
                </div>

            </div>

        </div>
    </div>
</template>
<script>
    export default {

        data() {
            return {
                users: [],
                filter: null,
                currentPage: 1,
                perPage: 10,
                totalRows: null,
                selectedID: null,
                fields: [
                    {
                        key: 'id',
                        sortable: true
                    },
                    {
                        key: 'name',
                        sortable: true
                    },
                    {
                        key: 'email',
                        sortable: true
                    },
                    {
                        key: 'actions'
                    }

                ],
            }
        },
        mounted() {
            this.getResults();
        },
        methods: {
            // Our method to GET results from a Laravel endpoint
            getResults(ctx, callback) {
                axios.get('/api/users')

                    .then(response => {
                        this.users = response.data;
                        this.totalRows = response.data.length;
                        return this.users;
                    });
            }
        },

    }
</script>

我的 API 返回的 JSON 数据：

[
    {
        "id": 1,
        "name": "test",
        "email": "user@user.nl",
        "email_verified_at": null,
        "created_at": "2018-09-28 16:04:36",
        "updated_at": "2018-09-28 16:04:36"
    }
]

我可以做些什么来解决这个加载时间问题？

更新：我将它托管在 VirtualBox 中的 Ubuntu 上，也许它对你们中的任何人都很重要。

更新对我的 API 的请求的响应时间：

【问题讨论】：

直接从浏览器加载 api 的响应时间是多少？也许，可能是你的硬件？
感谢您的回复保罗。虽然我无法在浏览器中请求 API，但在 Postman 中发送请求时，我的请求时间约为 195 毫秒。
在浏览器中打开开发者控制台的网络选项卡，查看响应时间。
应该想到了，我用响应时间的截图更新了话题。 @DerekPollard
主要原因应该是，您正在使用带有虚拟盒的 ubuntu 和您的操作系统消耗的内存，并且很快，如果您可以共享代码，那将很容易分辨（laravel）。您也不需要返回 this.users，因为您已经将值分配给 this.users :)

标签： laravel vue.js axios bootstrap-vue

【解决方案1】：

从您在帖子中的评论中，我猜您已经弄清楚出了什么问题？即，您的 VirtualBox 设置有什么奇怪的地方吗？

我克隆了您的应用，在我的 Mac 上加载仅需 88 毫秒。

顺便说一句，您的代码并非开箱即用。必须修复并绕过几件事才能使其运行。我还建议您安装 laravel-debugbar 以帮助在 laravel 中进行调试。

【讨论】：