In the process of developing my application, I am loading 3 JSON files to gather information about a game's characters, spells, and more. As of now, I have implemented 3 functions that utilize axios to make GET requests and store the responses. However, Iam uncertain if this approach is causing a delay in load time because I am not sure if these JSON files are loaded simultaneously or sequentially. Each file takes around 45 ms to load, so if they are being loaded sequentially, the total load time could be approximately 135 ms which is not optimal.
I have experimented with 2 different approaches but have not noticed any significant difference in loading time when checking Chrome's network tab. For reference, these functions reside in my Vue.js Vuex store, and the calls are triggered within the App.vue mounted hook.
The first method involves three separate functions, each making an individual GET request and then calling one after another:
this.$store.dispatch('getChampions')
this.$store.dispatch('getSummonerSpells')
this.$store.dispatch('getSummonerRunes')
The functions are defined as follows:
getChampions({commit, state}){
//axios code for getting champions
},
getSummonerSpells({commit, state}){
//axios code for getting summoner spells
},
getSummonerRunes({commit, state}){
//axios code for getting summoner runes
}
Alternatively, the second method involves a single function calling all three requests at once:
this.$store.dispatch('getRequirements')
The function is structured like this:
getRequirements({commit, state}){
axios.all([
//axios GET requests for all 3 JSON files
])
.then(axios.spread((response1, response2, response3) => {
commit('champions', {
champions: response1.data.data
})
commit('summonerSpells', {
summonerSpells: response2.data.data
})
commit('summonerRunes', {
summonerRunes: response3.data
})
}))
}