Vue JS, как сделать так, чтобы API-интерфейс ax ios выполнялся первым до загрузки HTML компонента DOM?

Question

Я все еще изучаю это VueJS с Laravel, я хочу получить данные о категориях из API и загрузить их в выпадающий список, но я обнаружил, что этот запрос Ax ios тоже выполняется long.

вот код фрагмента

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 LOADED 2

есть ли способ сделать мой запрос Ax ios API для извлечения данных перед загрузкой HTML fini sh?

Answer 1

Вы не можете получить доступ к реактивным данным до того, как создал ловушку. Ax ios предназначен для реактивной обработки, что означает, что как только данные станут доступны, они будут отображены. Предлагаемые ниже решения:

1. Вы можете запросить данные для родительского компонента и сохранить их, например, в localStorage . Тогда вы можете использовать его в любом месте приложения.

2. Держите свой код в хуке созданный . Используйте вычисляемое свойство вместо category для мгновенного рендеринга.

   computed: {computedCategories () {return this.categories; }}

3. Вы обязательно должны проверить свой код на стороне сервера для улучшения запросов.

Answer 2

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

Например, наличие запроса в родительском компоненте не компенсирует тот факт, что время отклика на запрос медленное и будет плохим для пользователя, без указания того, что компонент загружается / получение данных.

Если проблема в том, что вы получаете ошибки рендеринга, потому что categories еще не доступен для DOM, вы можете использовать условный рендер v-if="categories.length", чтобы отображать только элементы с данными, когда они доступны.