Блог

В настоящее время я пытаюсь разработать что-то с помощью VueJS, где я извлекаю данные с помощью Axios и помещаю их в массив.

Это мой объект данных

     data() {
    return {
        uid: [], // Each element contains a JSON containing the node and an array containg UID and operator name
        timer: null,
        tasks: [],
        nodes: [
            'assembler',
            'device'
        ]
    }
 

В created я вызываю функции для выборки данных через axios

  created:  function() {
  // Get current uids and tasks, if there are any
  this.fetchUID()
  this.fetchTasks()


}
 

И это мои методы

 methods: {
    fetchUID() {
        var obj = {}
        this.nodes.forEach(node => 
        axios.get('http://localhost:8080/'   node)
        .then(res => res.data.length > 0 ? obj[node] = [res.data[0].id, res.data[0].operator.name] : console.log("No data found for "   node   
        ". It seems there is no instance of "   node))
        .catch(err => console.log(err))
        )
        this.uid.push(obj)
    },
    fetchTasks() {
        // console log for testing
        console.log(this.uid[0].assembler)


    }
}
 

console.log(this.uid[0].assembler) возвращает undefined , хотя я вижу в консоли разработчика VueJS, которая uid[0].assembler определена и должна что-то возвращать. Почему он так себя ведет и как я могу это исправить?

fetchUID является ли асинхронным, поэтому выполняется fetchTasks после завершения выполнения fetchUID

 created:  function() {
  // Get current uids and tasks, if there are any
  this.fetchUID()
  // this.fetchTasks() to be executed later

},
methods: {
    fetchUID() {
        var obj = {}
        this.nodes.forEach(node => 
        axios.get('http://localhost:8080/'   node)
        .then(res => res.data.length > 0 ? obj[node] = [res.data[0].id, res.data[0].operator.name] : console.log("No data found for "   node   
        ". It seems there is no instance of "   node))
        .catch(err => console.log(err))
        )
        this.uid.push(obj);
        this.fetchTasks(); // Execute here
    },
    fetchTasks() {
        // console log for testing
        console.log(this.uid[0].assembler)


    }
}
 

Я наконец нашел ответ, проблема заключается в этой части кода

 fetchUID() {
    var obj = {}
    this.nodes.forEach(node => 
    axios.get('http://localhost:8080/'   node)
    .then(res => res.data.length > 0 ? obj[node] = [res.data[0].id, res.data[0].operator.name] : console.log("No data found for "   node   
    ". It seems there is no instance of "   node))
    .catch(err => console.log(err))
    )
    this.uid.push(obj)
}
 

Проблема forEach() в том, что на самом деле это не работает с async / await. Это должно сработать

        async fetchUID() {
       for(let node of this.nodes) {
           try  {
               const { data } = await axios.get(`http://localhost:8080/${node}`);
               if(data.length > 0)
                this.uid[node] = [data[0].id, data[0].operator.name];
               else
                console.log(`No data found for ${node}. It seems there is no instance of ${node}`)
           } catch (error) {
               // error handling
           }
       }
    }