javascript - 将多个 API 与相同的数组路径组合在一起

Question

使用 VUE 和 Axios，我尝试从暴雪 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 的所有信息，但不是第一个 - 如果我注释第二个“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