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

【问题标题】：Combine multiple APIs with the same array path将多个 API 与相同的数组路径组合在一起
【发布时间】：2020-04-12 15:56:04
【问题描述】：

使用 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 加载所有信息，但不是第一个 - 如果我评论第二个“this”代码但是 - 第一个加载 - 所以我知道它也有效，我只是显然在做某事这里错了。

【问题讨论】：

试试这个 ..var x = {}; x.a = 1; x.a = 2; console.log(x.a); - 他的输出只有2，你感到惊讶吗？如果没有，那么您应该能够立即看到问题
response??.data.ladderTeams 是一个数组吗？如果是这样... this.ladderTeams = [... responseNA.data.ladderTeams, ...responseKR.data.ladderTeams]; 会解决你的问题 - 否则 this.ladderTeams = Object.assign({}, responseNA.data.ladderTeams, responseKR.data.ladderTeams); 可以解决问题
@JaromandaX - 这并不让我感到惊讶，当你以这种方式定位它时它是有道理的。感谢您的帮助:)

标签： javascript html api vue.js axios

【解决方案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

【讨论】：

谢谢。当你这样解释时很明显，但我仍在学习。这确实有效，我已经切换到 Promise.all - 那里一切都很好，但它确实打破了我的 v-for 表。我可以加载数据，但它只加载初始数组 - {{ ladder.ladderTeams[0].teamMembers[0].displayName }} 实际上只是从每个数组中提取名字制作所有名字的完整列表。
那是因为你的 v-for 指的是数组，它是数组的数组。你最好现在在 ladderTeams[0] 中做一个 v-for x，然后再为 [1] 做一个。当您对一般的编码感到更熟悉时，您实际上可以将它们组合成一个 v-for，但只做现在可行的事情。

【解决方案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)
            }))

     },
    }

【讨论】：