vue在html文件中结合axios时，axios的this指向为undefined解决

当vue与axios直接在html文件中使用的时候，位于axios的请求中的this指向并不是指向vue,而是指向window，如果在请求中直接用this获取data中的数据会出现undefined的问题，解决思路是将ES5的函数语法更换为箭头函数即可解决此问题，深层的原因就得深入去了解箭头函数和普通函数之间的区别了！

案例：

new Vue({
	el: '#app',
	data:{
		carousels: [], 
    },
    created() {
      axios.get('/api/banners/').then(function (response) {
      	   // 这里的this.carousels是undefined，因此上下边的赋值是不起作用的
           this.carousels = res.data
       }).catch(function (error) {
           console.log(err)
       });
     },
 })

以上案例可以发现在axios中使用this获取data中的值是获取不到的，这就是this的指向问题造成的，他不是指向vue，只需要修改如下，将function函数改为箭头函数即可解决！

修改代码如下：

new Vue({
	el: '#app',
	data:{
		carousels: [], 
    },
    created() {
      axios.get('/api/banners/').then(res => {
           this.carousels = res.data
       }).catch(err => {
           console.log(err)
       });
     },
 })

到此问题就解决了！

如果你也在学习django，那么欢迎私信小编一起交流学习，欢迎star以上项目，给个鼓励，也欢迎您能关注我的公众号“幸福关中”，一起学习交流，上边有很多学习资料哦！