Приложение, которое я создаю, загружает 3 файла JSON, чтобы получить информацию о персонажах, заклинаниях и многом другом. В настоящее время у меня есть 3 функции, которые используют axios для выполнения GET-запросов, а затем для хранения ответов, однако мне интересно, замедляю ли я время загрузки, потому что, честно говоря, я не уверен, загружаются ли эти файлы JSON одновременно или один за другим,На загрузку каждого файла уходит около 45 мс, поэтому, если они загружаются один за другим, я смотрю время загрузки около 135 мс, и оно мне не нравится.
В настоящее время я пробовал 2 способано, честно говоря, я не вижу разницы во времени загрузки на вкладке сети Chrome. Если вам интересно, функции находятся в моем хранилище Vue.js Vuex, а вызовы выполняются в подключенном хуке App.vue.
Первый способ использует 3 отдельные функции, каждая из которых выполняет свой собственный запрос GET. Затем эти функции вызываются одна за другой.
Вызов:
this.$store.dispatch('getChampions')
this.$store.dispatch('getSummonerSpells')
this.$store.dispatch('getSummonerRunes')
Функции:
getChampions({commit, state}){
axios.get("https://ddragon.leagueoflegends.com/cdn/9.14.1/data/en_US/champion.json")
.then((response) => {
commit('champions', {
champions: response.data.data
})
})
.catch(function (error) {
console.log(error);
})
},
getSummonerSpells({commit, state}){
axios.get("http://ddragon.leagueoflegends.com/cdn/9.14.1/data/en_US/summoner.json")
.then((response) => {
commit('summonerSpells', {
summonerSpells: response.data.data
})
})
.catch(function (error) {
console.log(error);
})
},
getSummonerRunes({commit, state}){
axios.get("https://ddragon.leagueoflegends.com/cdn/9.14.1/data/en_US/runesReforged.json")
.then((response) => {
commit('summonerRunes', {
summonerRunes: response.data
})
})
.catch(function (error) {
console.log(error);
})
}
И, используя второй способ, у меня есть 1 функция типаэто:
Звонок:
this.$store.dispatch('getRequirements')
Функция:
getRequirements({commit, state}){
axios.all([
axios.get('https://ddragon.leagueoflegends.com/cdn/9.14.1/data/en_US/champion.json'),
axios.get('http://ddragon.leagueoflegends.com/cdn/9.14.1/data/en_US/summoner.json'),
axios.get('https://ddragon.leagueoflegends.com/cdn/9.14.1/data/en_US/runesReforged.json')
])
.then(axios.spread((response1, response2, response3) => {
commit('champions', {
champions: response1.data.data
})
commit('summonerSpells', {
summonerSpells: response2.data.data
})
commit('summonerRunes', {
summonerRunes: response3.data
})
}))
}