axios中的this

今天别人使用axios中遇到了这个问题，因为感觉比较好奇，所以就帮着解决了一下，这篇博客用于记录一下此次错误的分析

这个是Vue中的钩子函数，在里面利用axios进行了一次get请求

        created() {
            axios.get('https://httpbin.org/get')
            .then(function(response) {
                console.log(this);
            })
            .catch(error => {
                alert('网络错误，不可访问');
                console.log(this);
            });
        },

这种情况下，输出this得到的’undefined’，但是当写成箭头函数的时候

axios.get('https://httpbin.org/get')
  .then(response => {
  console.log(this);
})
  .catch(error => {
  alert('网络错误，不可访问');
});

这样输出就是一个Vue的实例对象：

也许你想问，知道这个有什么用呢？举个例子，加入在methods对象中，有个方法需要在then方法中调用methods中的某个方法呢？如果按照ES5的写法，肯定是会报错的，所以针对ES5的写法，我有如下建议

methods: {
  doThis() {
    var that = this;
     axios.get('https://httpbin.org/get')
      .then(function() {
        that.dothat();
      })   
  },
  doThat() {
    //...
  }
}

这样就把this保存到当前作用域中了

另一种就是使用箭头函数，主要是箭头函数this指的就是词法作用域

methods: {
  doThis() {
    var that = this;
     axios.get('https://httpbin.org/get')
      .then(response => {
        this.doThat();
      })   
  },
  doThat() {
    //...
  }
}

学习是一个逐渐积累的过程，加油 ^_^