Вызов API REST сторонним организациям при загрузке страницы с помощью Axios

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.

Вот JSFiddle моей ошибки http://jsfiddle.net/cL9a1pdb/

Любая помощь очень ценится.

ОБНОВЛЕНИЕ СОТВЕТ: Здесь произошла пара ошибок, которые необходимо было исправить. Первая - это то, что было изложено ниже относительно того, как forEach должен быть сконструирован как this.friends_list.forEach....

2-й, как я передавал данные 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

Вот ваш JSFiddle, работающий . В основном вы забыли this при вызове friends_list, а некоторые здесь и там.

Что касается вашего цикла в вашем вызове axios, он работает, но как ваш JSFiddle, так и ваш пример здесь, похоже, имеют одну и ту же проблему: способ хранения результата. Похоже, вы переписываете значение переменной каждый раз, когда получаете ответ от своего API. В вашем JSFiddle:

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

Это будет перезаписывать this.lists каждый раз, когда вы получите ответ от одного из ваших вызовов API. Попробуйте сохранить его так:

// "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. Вы все еще можете использовать v-for для объектов в Vue. Если вы хотите сохранить this.lists как массив, вы можете использовать:

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

Таким образом, вы будете хранить все данные от всех вызовов API, но не сможете сказать, какой ответ принадлежит другому другу, если в сами данные ответа не включен какой-либо идентификатор.

Answer 2

Это потому, что вы определяете список друзей в данных. Так что это не определено в ваших методах и хуках. Вы должны ссылаться на это через это. Также у вас есть в данных friends_list s , а в методе вы пропустили последние s и имеете только friends_list