在Vue应用中使用axios是一种常见的网络请求方式。然而，有时候在使用过程中可能会遇到“TypeError: Cannot read property 'xxx' of undefined”错误。
这个错误通常出现在使用axios时，请求返回了undefined，而程序却仍在尝试访问该对象的属性。为了避免这个错误，有以下几种解决方法：
- 检查接口返回情况
使用axios发送请求时，可以在then()方法中处理返回结果。但是，如果接口返回的是undefined，那么即使我们在then()方法中做了判断，也会遇到“Cannot read property 'xxx' of undefined”的错误。
因此，在使用axios时，需要注意检查接口返回的情况。通过console.log()语句输出返回结果，检查是否存在undefined的情况。
立即学习“前端免费学习笔记（深入）”；
- 判断属性是否存在
如果我们确认接口返回的结果是一个对象，那么在访问该对象的属性之前，最好先做一个定义判断。例如：
axios.get('/api/data')
.then(response => {
if(response.data && response.data.xxx) {
// ...处理逻辑
}
})这样，即使接口返回的是undefined，程序也会在访问属性时进行判断并避免出错。
- 设置默认值
在开发中，有时候接口返回的数据可能为空，而我们需要在程序中使用该数据。这时，我们可以设置一个默认值，避免出现“Cannot read property 'xxx' of undefined”的错误。例如：
data() {
return {
list: [],
isLoading: false
}
},
created() {
this.getData();
},
methods: {
getData() {
axios.get('/api/list')
.then(response => {
this.list = response.data || []; // 设置一个默认值
this.isLoading = false;
})
.catch(error => {
console.log(error);
this.isLoading = false;
});
}
}在上面的代码中，通过设置一个默认值(this.list = response.data || [])，即使接口返回了undefined，程序也能够正常运行，并且不会出现“Cannot read property 'xxx' of undefined”的错误。
总结
Vue应用中使用axios时出现“Cannot read property 'xxx' of undefined”的错误，通常是由于接口返回了undefined，而程序在访问该对象的属性时未做判断导致的。为了避免这个错误，我们需要在代码中注意检查接口返回情况、判断属性是否存在以及设置默认值，从而保证程序的正常运行。
