Vue JS，如何在加载 HTML DOM 组件之前先运行 axios 请求 API？答案

【问题标题】：Vue JS, how to make axios request API running first before HTML DOM component loaded?Vue JS，如何在加载 HTML DOM 组件之前先运行 axios 请求 API？
【发布时间】：2020-02-03 04:49:23
【问题描述】：

我还在用 Laravel 学习这个 VueJS，我想做的是从 API 中获取类别数据并将其加载到选择下拉列表中，但是我发现这个 Axios 请求运行时间太长。

这是sn-p代码

export default {

    data() {
        return {
            category: 0,
            categories: [],
            loading: true,
        }
    },
    async created() {
        let uri = '/api/getCategory';
        axios.get(uri).then(response => {
            this.categories = response.data;
            console.log('2');
        }).catch(error => console.log(error))
            .finally(() => {
                this.loading = false;
            });
        console.log('1');
    },
    methods: {
            loadCategories() {
            axios.get('/api/getCategory')
                .then(response => this.categories = response.data)
                .catch(error => console.log(error));
        }
    }
}

基于此。 1 已加载 DOM 2

有没有办法让我的 Axios API 请求在 HTML 完成加载之前先获取数据？

【问题讨论】：

请查看stackoverflow.com/questions/57077104/…
也检查这个链接：stackoverflow.com/q/46731440/2815635
你试过beforeMount()钩子了吗？

标签： javascript laravel vue.js

【解决方案1】：

你不能在 created 钩子之前访问响应式数据。 Axios 是为响应式处理而设计的，这意味着一旦数据可用，它们就会被显示出来。我建议的解决方案如下：

例如，您可以请求父组件上的数据并将其存储在 localStorage 中。你可以在应用程序的任何地方使用它。
将您的代码保存在 created 挂钩中。使用计算属性而不是 categories 进行即时渲染。

计算：{ 计算类别（）{ 返回 this.categories; } }
您必须检查您的服务器端代码以进行查询增强。

【讨论】：

【解决方案2】：

如果你不能减少请求的响应时间，我建议你实现某种视觉加载指示，也许在选择输入上。可能是一个微调器或一个小的“正在加载...”文本。

例如，将请求放在父组件中，并不能弥补请求响应时间缓慢的事实，并且会给用户带来不好的体验，并且没有迹象表明该组件正在加载/获取数据。

如果问题是由于categories 对DOM 尚不可用而出现渲染错误，您可以使用条件渲染v-if="categories.length"，仅在数据可用时渲染带有数据的元素。

【讨论】：