Axios-Make multiple request at once (vue.js)

Question

How to make multiple requests in parallel using axios and vue ?

Answer 1

You can pass your asynchronous calls to Promise.all. As long as each of them returns a promise they will execute at the same time. I'm using store.dispatch but you could equally use axios calls or fetch.

In this example i'm making the calls when the vue component gets created:

...
async created() {
    const templates = this.$store.dispatch(TEMPLATES_LOAD);
    const userTemplates = this.$store.dispatch(USER_TEMPLATES_LOAD);
    const players = this.$store.dispatch(OTHER_PLAYERS_LOAD);
    return await Promise.all([templates, userTemplates, players])
        .then(() => {
            console.log('Loaded data for form elements');
        });
}