Vue JS, how to make axios request API running first before HTML DOM component loaded?

Question

I'm still learning this VueJS with Laravel, what I want to do is to get the categories data from API and load it into the select dropdown, but I found that this Axios request running too long.

here's the snippet code

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));
        }
    }
}

based on this. 1 DOM LOADED 2

is there a way to make my Axios API request to fetch the data first before the HTML finish loaded?

please check out this stackoverflow.com/questions/57077104/… — Kamlesh Paul
– Kamlesh Paul, Commented Feb 3, 2020 at 5:11

Samidjo · Accepted Answer · 2020-02-03 14:30:37Z

1

You cannot access reactive data before the created hook. Axios is made up for reactive processing which means once the data are available they will be displayed. The solutions I am suggesting are the below :

You could request the data on a parent component and store it in localStorage for example. You could use it anywhere in the application then.
Keep your code in the created hook. Use a computed property instead of categories for instant rendering.

computed:{ computedCategories(){ return this.categories; } }
You definitely have to check your server side code for query enhancement.

answered Feb 3, 2020 at 14:30

Samidjo

2,35531 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

krismeister1993 · Accepted Answer · 2020-02-04 07:22:49Z

0

If you're not able to reduce the response time of the request, I suggest you implement some kind of visual loading indication, maybe on the select input. Could be a spinner or a small "Loading..." text.

Having the request in a parent component for example, won't make up for the fact that the request response time is slow and will be a bad experience for the user, with no indication that the component is loading/fetching data.

If the problem is that you get render errors, because categories is not yet available to the DOM, you can use a conditional render v-if="categories.length", to only render the elements with data, when it's available.

answered Feb 4, 2020 at 7:22

krismeister1993

613 bronze badges

Collectives™ on Stack Overflow

Vue JS, how to make axios request API running first before HTML DOM component loaded?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related