javascript - 我目前正在使用 Axios 对 JSON 文件发出 3 个 GET 请求，它们是同时加载还是一个接一个加载？

Question

我正在制作的应用程序加载了 3 个 JSON 文件，以获取有关游戏 Angular 色、咒语等的信息。目前我有 3 个函数使用 axios 发出 GET 请求然后存储响应，但是，我想知道我是否正在减慢我的加载时间，因为坦率地说我不确定这些 JSON 文件是同时加载还是一个接一个加载.每个文件加载大约需要 45 毫秒，所以如果一个接一个地加载它们，我会看到大约 135 毫秒的加载时间，我不喜欢它。

目前我已经尝试了两种方法，但坦率地说，我没有看到 chrome 网络选项卡中的加载时间有什么不同。如果您想知道，这些函数位于我的 Vue.js Vuex 存储中，并且调用在 App.vue 挂载钩子(Hook)中执行。

第一种方法使用 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
        })
    }))
}

Answer 1

您正在并行执行请求，因此您的浏览器将尝试同时执行它们。它是否这样做是 up the browser .

您可以使用浏览器的Network 控制台计时列(在 Chrome 中也称为 Waterfall)来查看发生了什么。

如果你的问题是

"is there a difference between these?"

就时间而言，答案是“否”。

如果您开始遇到任何特定请求的错误，您的第一个选项会更可靠，因为 axios.all 将在任何失败时拒绝 promise 。

---

如果您想加快速度，您可以创建一个将三个结果合并为一个的服务，这样您只需发出一个请求。然后输入 cache以获得额外的加速。