I'm currently making 3 GET requests for JSON files using Axios, are they loaded simultaneously or one after another?

Question

The application that I'm making loads 3 JSON files in order to get information about a game's characters, spell and more. Currently I have 3 functions that use axios to make GET requests and then store the responses, however, I'm wondering if I'm slowing my load time because frankly I'm not sure if these JSON files are loaded simultaneously or one after another. Each file takes about 45 ms to load so if they're being loaded one after another, I'm looking at around 135 ms load time and I'm not liking it.

Currently I've tried 2 ways but frankly I don't see a difference in the loading time in chrome's network tab. If you're wondering, the functions are located in my Vue.js Vuex store and the calls are executed in App.vue mounted hook.

The first way uses 3 separate functions and each makes its own GET request. Then these functions are called one after another.

The call:

this.$store.dispatch('getChampions')
this.$store.dispatch('getSummonerSpells')
this.$store.dispatch('getSummonerRunes')

The functions:

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

And using the second way, I have 1 function like this:

The call:

this.$store.dispatch('getRequirements')

The function:

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

Well I'm just wondering if there's anything I can do to speed up the loading process of these files. In the network tab, the lines that show the loading of these files start and end at approximately the same time so I assume they're being executed simultaneously. Also I was wondering if there's a difference between the 2 options but you already answered that. — Onyx, Oct 10 '19 at 06:07
I realised after two large comments that I should have just written an answer . See below — Phil, Oct 10 '19 at 06:09
I think the requests send one after another, but, the responses come back at an unknown order because the http request is async. if you use `Promise.all()`, its internal will wait for the 3 responses all come back then call the then(), the wait time depends on the slowest request, not the sum of them. — Spark.Bao, Oct 10 '19 at 06:46

Phil · Accepted Answer · 2019-10-10T06:12:35.960

2

You're executing the requests in parallel so your browser will attempt to execute them simultaneously. Whether or not it does this is up the browser.

You can use your browser's Network console timing column (aka Waterfall in Chrome) to see what's going on.

If your question is

"is there a difference between these?"

the answer is "no" as far as timing goes.

If you start running into errors with any particular request, your first option is more robust since axios.all will reject the promise if any fail.

If you want to speed this up, you could create a service that combines the three results in to one so you're only making a single request. Then throw in a cache for an extra speed-up.

edited Oct 10 '19 at 06:12

answered Oct 10 '19 at 06:05

Phil

157,677
23
242
245

What do you mean by "a service that combines the three results in to one so you're only making a single request"? – Onyx Oct 10 '19 at 06:18
A server-side thing that can fetch the 3 results and combine them into a single json result. It adds a server component into your app so you'd need to weigh that up against your performance requirements – Phil Oct 10 '19 at 06:30

score 0 · Answer 2 · answered Oct 10 '19 at 06:05

0

When all requests are complete, you’ll receive an array containing the response objects in the same order they were sent. Commit() is called only after both of your requests are completed.

answered Oct 10 '19 at 06:05

Abdurauf Sherkulov

63
2
9

I'm currently making 3 GET requests for JSON files using Axios, are they loaded simultaneously or one after another?

2 Answers2