组合具有相同数组路径的多个API

Question

使用VUE和Axios，我试图从Blizzards API服务器提取数据-我想从不同的游戏区域获取数据。我正在使用的代码从这两个区域加载数据，但只在我的表中放入一组。

我的VUE

const vm = new Vue({
el: '#app',
data: {
    ladderTeams: [],


},
mounted() {
    this.pullGMS();
},
methods: {

    async pullGMS() {

        axios.all([
            axios.get('https://us.api.blizzard.com/sc2/ladder/grandmaster/1?access_token='),
            axios.get('https://us.api.blizzard.com/sc2/ladder/grandmaster/2?access_token=')
        ])
            .then(axios.spread((responseNA, responseKR) => {
                this.ladderTeams = responseNA.data.ladderTeams;
                this.ladderTeams = responseKR.data.ladderTeams;

                console.log(this.ladderTeams = responseNA.data.ladderTeams);
                console.log(this.ladderTeams = responseKR.data.ladderTeams);
            }))
    },
},

我的HTML

<div class="content">
<div style="height:400px;overflow:auto;position:relative;top:40px;" class="table" id="app">
    <table>
        <tr>
            <th>Clan</th>
            <th>Player Name</th>
            <th>Race</th>
            <th>MMR</th>
        </tr>
        <tr v-for="(ladder, teamMembers, displayName, mmr) in ladderTeams">
            <td>{{ ladder.teamMembers[0].clanTag }}</td>
            <td>{{ ladder.teamMembers[0].displayName }}</td>
            <td>{{ ladder.teamMembers[0].favoriteRace }}</td>
            <td>{{ ladder.mmr }}</td>

        </tr>

        </tr>
    </table>
</div>

它确实可以从第二个API加载所有信息，但是不能从第一个API加载所有信息-但是，如果我注释第二个“ this”代码-第一个加载-所以我知道它也可以工作，我显然做错了在这里。

Answer 1

您正在将数组分配给原始变量并替换它们。

违规代码：

this.ladderTeams = responseNA.data.ladderTeams;
this.ladderTeams = responseKR.data.ladderTeams;

正确的代码：

this.ladderTeams.push(responseNA.data.ladderTeams)
this.ladderTeams.push(responseKR.data.ladderTeams)

您当前正在执行：

let myArray = []
myArray = [1, 2, 3]
myArray = [4, 5, 6]
console.log(myArray) //[4, 5, 6]

您需要使用push添加到数组。

let myArray = []
myArray.push([1, 2, 3])
myArray.push([4, 5, 6])
console.log(myArray) //[[1, 2, 3], [4, 5, 6]])

[关于axios.all，也应替换为引擎盖下使用的Promise.all。此Axios版本可能已弃用或删除。https://github.com/axios/axios/issues/1042

Answer 2

您可以尝试这种方式。

const vm = new Vue({
el: '#app',
data: {
    ladderTeams: [],


},
mounted() {
    this.pullGMS();
},
methods: {

    async pullGMS() {

        axios.all([
            axios.get('https://us.api.blizzard.com/sc2/ladder/grandmaster/1?access_token='),
            axios.get('https://us.api.blizzard.com/sc2/ladder/grandmaster/2?access_token=')
        ])
            .then(axios.spread((responseNA, responseKR) => {
                this.ladderTeams.push(responseNA.data.ladderTeams);
                this.ladderTeams.push(responseKR.data.ladderTeams);

                console.log(this.ladderTeams)
            }))

     },
    }