Question

我有一个网页，希望在页面加载时为用户填充数据。我知道我可以在要运行它的特定页面上使用axios.get()来完成此操作。

但是我想做的是遍历静态值列表，并为每个值进行API调用，然后在用户访问页面时将其传递给用户。

我尝试在中间件中执行此操作，但是我收到一个错误消息，即我的friend_list没有定义，我对我要去哪里出错感到有些困惑。

这是我在中间件中的JS文件

    import axios from 'axios'
export default function () {    
    friends_list = [
        { tag: 'friend1' },
        { tag: 'friend11' },
        { tag: 'friend16' },
        { tag: 'friend9' }
    ]    
    friends_list.forEach(i => {
        axios.get('https://some.api/friend/'+i.tags+'/profile')
            .then(res => {
                stats = res.data['d']
                console.log(stats)
                return {
                    game_stats: [
                        {EKIA: stats['a']},
                        {Deaths: stats['b']},
                        {HeadShots: stats['c']},
                        {Wins: stats['d']},
                        {Suicides: stats['e']},
                        {EKIAdRatio: stats['f']},
                        {KillHC: stats['g']}
                    ]
                 }                
            });
    })

};

我可以在stats.vue页面上进行此调用，但无法循环浏览stats.vue页面上的列表。

这是我的错误http://jsfiddle.net/cL9a1pdb/的JSFiddle

非常感谢您的帮助。

使用答案更新：这里有一些错误需要解决，第一个是下面概述的关于将forEach构造为this.friends_list.forEach....

的内容

第二种方式是我如何传递数据nuxt，失败的原因是未定义对象，因为未填充数据

工作代码：

import axios from 'axios'
export default {
  data(){    
    friends_list = [
        { tag: 'friend1' },
        { tag: 'friend11' },
        { tag: 'friend16' },
        { tag: 'friend9' }
    ],
    game_stats: {}
  },
  created(){    
    this.friends_list.forEach(i => {
        axios.get('https://some.api/friend/'+i.tags+'/profile')
            .then(res => {
                return {
                    this.game_stats[res.data['d']['username'] = {
                        {EKIA: res.data['d']['a']},
                        {Deaths: res.data['d']['b']},
                        {HeadShots: res.data['d']['c']},
                        {Wins: res.data['d']['d']},
                        {Suicides: res.data['d']['e']},
                        {EKIAdRatio: res.data['d']['f']},
                        {KillHC: res.data['d']['g']}
                    }
                 }                
            });
    })
};

Answer 1

Here is your JSFiddle working。基本上，您在呼叫this时忘记了friends_list，有些在这里和那里。

关于axios调用上的循环，它可以工作，但是JSFiddle和此处的示例似乎都存在相同的问题：存储结果的方式。每次您从API获得响应时，您似乎都在写变量的值。在您的JSFiddle中：

.then(response => {
  this.lists = response.data
})

每次您从一个API调用中获得答案时，这将覆盖this.lists。尝试像这样存储它：

// "friendId" is a unique identifier for the friend,
// it should be unique to each loop iteration
// for example you can use an id, a gamer tag, or an email 
// linked to the friend's profile

.then(response => {
  this.lists['friendId'] = response.data 
})

这样，如果您获得不同朋友的个人资料，则将保留所有axios呼叫中的数据。

旁注： this.lists是要使用friendId的对象而不是数组。您仍然可以在Vue中的对象上使用v-for。如果要将this.lists保留为数组，可以使用：

.then(response => {
  this.lists.push(response.data)
})

这样，您将保留所有API调用中的所有数据，但除非响应数据本身包含某种ID，否则您将无法分辨出哪个响应属于哪个朋友。

Answer 2

这是因为您在数据中定义了friend_list。因此，它在您的方法和挂钩中未定义。您应该通过它引用它。同样，您在数据中的friends_list s 中，而在方法中您错过了last s，并且仅具有friends_list

使用Axios在页面加载时对第三方进行REST API调用

2 个答案: