VueJS：使用axios获取数据后未定义数组的属性答案

【问题标题】：VueJS: Properties of array undefined after fetching data with axiosVueJS：使用axios获取数据后未定义数组的属性
【发布时间】：2021-04-20 15:57:06
【问题描述】：

目前我尝试使用 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 已定义并且应该返回一些内容。为什么它的行为如此，我该如何解决？

【问题讨论】：

标签： javascript vue.js axios

【解决方案1】：

fetchUID 是异步的，所以在完成fetchUID 的执行后执行fetchTasks

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)


    }
}

【讨论】：

【解决方案2】：

终于找到答案了，问题出在这部分代码

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 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
           }
       }
    }

【讨论】：