Блог

Главная - Вопросы по программированию - Страница отображается до извлечения данных

Страница отображается до извлечения данных

#javascript #laravel #vue.js #nuxtjs

#javascript #laravel #vue.js #nuxtjs

Вопрос:

Я новичок в JS и я извлекаю некоторые данные с помощью axios из моего локального API (Laravel)

Всякий раз, когда я обновляю страницу, например, с помощью F5 или CTRL R, css загружается до появления содержимого. Из-за этого страница выглядит уродливо при загрузке данных.

 export default {
    data() {
        return {
            user: {},
        }
    },
    async fetch() {
        const data = await this.$axios.$get('/users?name='   this.$route.params.name)
        this.user = data
        console.log(this.user.name)
    }
}

Что я могу сделать, чтобы предотвратить это?
Даже если я добавлю пользовательские загрузчики, страница будет отображаться в течение секунды, затем загрузчик появится и будет находиться там до его загрузки. Но почему? И как мне сделать так, чтобы она выглядела лучше?

РЕДАКТИРОВАТЬ: я знаю, что мне нужен загрузчик, но, видимо, я неправильно его реализую. Как уже говорилось, загрузчик уже есть, но он появляется только через 1 секунду после обновления, перед появлением загрузчика всегда отображается пустой css / html без загруженного содержимого.

Комментарии:

1. Вы можете использовать загрузчик, он не будет показывать содержимое, пока ваше обещание не будет выполнено полностью

2. По сути, вы хотите определить оверлей загрузки в верхней части вашей HTML-страницы, а затем удалить или скрыть его в конце асинхронной задачи. Надеюсь, это поможет — я бы с удовольствием поделился некоторыми фрагментами, но в данный момент я не за своим компьютером.

3. Я пытался добавить isLoading bool в блок try, но это оказывает то же влияние, что и написанное выше.

Ответ №1:

вы должны использовать директиву v-if

 export default {
    data() {
        return {
            user: {},
            isLoading: false
        }
    },
    async fetch() {
        this.isLoading = true
        const data = await this.$axios.$get('/users?name='   this.$route.params.name)
        this.user = data
        this.isLoading = false
    }
}

…

 <div>
    <div v-if="isLoading">Loader</div>
    <div v-else>Fetched content</div>
</div>

Ответ №2:

То, что вы хотите разместить в этих ситуациях, называется предварительными загрузчиками, или вы также можете использовать скелеты из antd, если вы используете его. Вот ссылка на скелет

https://ant.design/components/skeleton/#header

Также выполните поиск по предварительным загрузчикам, и вы найдете многие из них в codepens или других ссылках, и внедряйте их в свои проекты.

Концепция предварительных загрузчиков заключается в том, что они будут показаны в первую очередь на вашей странице, а когда содержимое загружено, вы просто скрываете или удаляете их полностью со страницы.