Vue中使用axios时this指向undefined的解决方案与原理

Vue axios this指向问题详解

前言

axios作为vue-resource的替代方案，在Vue生态中广受欢迎。自Vue 2.0发布以来，原作者尤雨溪宣布停止维护vue-resource，转而官方推荐axios进行数据请求。关于axios的更多详细功能介绍，可参考相关技术文档：https://www.jb51.net/article/109444.htm

本文重点探讨在Vue组件中使用axios发起网络请求时，回调函数内部this指向丢失的问题，并提供具体的解决思路与原理分析。

1. 解决方案

在Vue组件中使用axios进行网络请求时，开发者常遇到回调函数中的this不指向Vue实例，而是变为undefined的情况。使用ES6的箭头函数（=>）可以有效解决此问题。具体实现方式如下代码所示：

methods: {
 loginAction(formName) {
 this.$axios.post('http://127.0.0.1/u/subLogin', {
  username: this.username,
  password: this.password
 })
  .then(function(response){
  console.log(this); //这里 this = undefined
  })
  .catch((error)=> {
  console.log(error); //箭头函数"=>"使this指向vue
  });

 });
 }
} 

2. 原理分析

ES6中的箭头函数（=>）采用词法作用域，其内部的this值由定义时的外层上下文决定，即继承自调用者（此处为Vue实例）。因此，在箭头函数中可以直接访问Vue实例的数据和方法。

3. 补充说明

采用箭头函数写法后，可以简化代码结构，无需再使用以下两种传统方式来处理this指向问题：

方法一：bind(this)来改变匿名函数的this指向

方法二：Hack写法 var _this= this; ：

loginAction(formName) {
 var _this= this;
 this.$axios.post("...")
 .then(function(response){
  console.log(_this); //这里 _this 指向vue
 })
 });
 }

总结

以上就是本文关于Vue中使用axios时this指向问题的全部内容。希望这些内容能为大家的学习或工作提供有价值的参考。如有任何疑问，欢迎留言交流，感谢大家的支持。