如何在Axios中调用函数？Vue.js中调用时出现undefined报错

先梳理下你代码里的几个关键语法错误，正是这些问题导致了undefined报错：

1. Created生命周期钩子的写法错误 #

Vue的生命周期钩子需要是函数形式，但你写成了对象字面量。正确的写法应该是：

created() {
  this.List();
}
// 或者ES5兼容写法
created: function() {
  this.List();
}

原来的created: { this.List(); }会被Vue当成普通的组件属性，根本不会触发初始化钩子，导致List方法一开始就没被执行，后续自然会出现方法undefined的问题。

2. Axios回调与方法的闭合语法错误 #

你的List方法里，axios的then回调缺少闭合括号，整个方法也没有正确收尾。修正后的完整代码如下：

methods: {
  sett() {
    console.log("result");
  },
  List() {
    var self = this;
    axios.get("http://localhost:8080/api/v1/pas/device")
      .then(function(res) {
        self.sett();
      }) // 补上then回调的闭合括号
      .catch(function(error) {
        // 建议加上catch捕获请求错误，避免控制台无意义报错
        console.error("请求失败:", error);
      });
  } // 补上List方法的闭合括号
},
created() {
  this.List();
}

之前的代码因为缺少这些闭合符号，导致Vue无法正确解析组件的methods配置，方法无法被识别，调用时就会出现undefined提示。

额外优化建议 #

在Vue中，你可以用箭头函数代替保存self的写法，箭头函数会自动继承外部的this指向，代码更简洁：

List() {
  axios.get("http://localhost:8080/api/v1/pas/device")
    .then(res => {
      this.sett(); // 直接用this即可，箭头函数绑定了组件实例的this
    })
    .catch(error => {
      console.error("请求失败:", error);
    });
}

按照上面的修正，你的代码应该就能正常执行，不会再出现undefined的报错了。

内容的提问来源于stack exchange，提问作者Randy