浅谈vue使用axios的回调函数中this不指向vue实例,为undefined

在Vue项目中，我们通常使用 axios 来进行 HTTP 请求。但是，在 axios 的回调函数中， this 的指向经常会出现问题，指向的不是 Vue 实例，而是 undefined。这种情况通常发生在箭头函数、回调函数嵌套等场景中。

为了解决这个问题，我们可以采取以下两种方法：

方法一：使用箭头函数

ES6 的箭头函数可以继承上下文中的 this，因此可以用来避免上述情况。我们可以将 axios 的回调函数写成箭头函数的形式，这样 this 就可以指向 Vue 实例了。

以下是示例代码：

export default {
  data() {
    return {
      dataList: []
    };
  },
  methods: {
    getData() {
      axios.get(url).then(response => {
        // 回调函数中使用箭头函数，this 指向 Vue 实例
        this.dataList = response.data;
      }).catch(error => {
        console.log(error);
      });
    }
  }
}

方法二：使用 bind 绑定 this

另外一种方法是使用 bind 函数将回调函数中的 this 绑定到 Vue 实例上。这种方式比较适用于回调函数中使用了传统的 function 表达式的情况。

以下是示例代码：

export default {
  data() {
    return {
      dataList: []
    };
  },
  methods: {
    getData() {
      axios.get(url).then(function (response) {
        // 回调函数中使用 bind 绑定 this，this 指向 Vue 实例
        this.dataList = response.data;
      }.bind(this)).catch(function (error) {
        console.log(error);
      });
    }
  }
}

通过上述两种方法，我们可以很方便地解决在 axios 回调函数中 this 指向 undefined 的问题。