Vue + Axios请求返回undefined问题排查求助

嘿，我一眼就揪出问题所在啦——你在methods里用了箭头函数定义getPosts方法，这直接导致this的指向完全跑偏，所以才会出现请求相关的undefined问题。

核心原因 #

箭头函数不会绑定自己的this，它会继承外层作用域的this。在Vue组件的methods里用箭头函数的话，this根本不是当前的组件实例，而是指向定义时的外层上下文（大部分情况下是window或者严格模式下的undefined）。这样一来，this.axios自然找不到，请求也就没法正常发起，后续的响应处理也会跟着出问题。

具体修复步骤 #

1. 把箭头函数改成普通函数
   这是最关键的一步，Vue会自动给methods里的普通函数绑定正确的组件实例this：

   export default {
     data() {
       return {
         post: {},
       }
     },
     methods: {
       // 这里改成普通函数，别再用箭头函数啦
       getPosts() { 
         console.log('started');
         let uri = 'https://jsonplaceholder.typicode.com/posts';
         this.axios.get(uri).then((response) => {
           console.log(response.data); // 现在能正常打印响应数据了
           this.post = response.data; // 也能把数据赋值给data里的post了
         }).catch(error => {
           // 别忘了加错误捕获，方便排查问题
           console.error('请求出错啦:', error);
         });
       }
     },
     // 记得在组件挂载时调用这个方法，不然它不会自动执行
     mounted() {
       this.getPosts();
     }
   }
   

2. 额外检查点

   • 确认你在app.js里已经正确执行了Vue.use(VueAxios, axios)，全局注册后，每个组件实例才能通过this.axios访问到Axios。
   • 如果你的PostComponent是.vue单文件组件，确保<script>标签里的代码没有语法错误（比如你原来的代码里console.log...没写完，实际项目里要补全哦）。

这样修改之后，你的Axios请求应该就能正常拿到响应数据，不会再出现undefined的问题啦～

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