本文主要针对vue中使用axios进行与后台交互后，从后台拿到数据绑定到前台的时候发现绑定不上的问题进行处理。

下面是出现问题的代码：

testget: function () {  
        this.$ajax({  
          method: 'get',  
          url: 'zk/connect?connectionString=' + this.connectionString,  
        }).then(function (res) {  
          let data = res.data;  
          alert(data);  
          console.error(data);  
          this.conflag = data.flag;  
        }.bind(this));  
      },  

这段代码因为有bind(this)的缘故，可以对this中的变量进行访问。但是在有些情况下，还是需要对this进行修改，变成that，然后在使用。为了解决这样的问题，我们可以把程序修改成es6的形式即可。

testget: function () {  
        this.$ajax({  
          method: 'get',  
          url: 'zk/connect?connectionString=' + this.connectionString,  
        }).then((res)=> {  
          let data = res.data;  
          alert(data);  
          console.error(data);  
          this.conflag = data.flag;  
        });  
      },  

这样就能够在then的回调中使用这个this了。

下面是一个比较完成的例子：

getName: function () {
        this.$ajax({
          method: 'get',
          url: '/test/hello',
          params: {
            firstName: 'Fred',
            lastName: 'Flintstone'
          }
        }).then((response) => {
          console.log(response.data);
          this.msg = response.data;
        }).catch((error) => {
          console.log(error);
        });
      },
      getTables: function () {
        var params = new URLSearchParams();
        params.append('name', 'hello jdmc你好');
        params.append('id', '2');
        this.$ajax({
          method: 'post',
          url: '/test/tables',
          data: params
        }).then((response) => {
          console.log(response.data);
          this.tableData = response.data;
        }).catch((error) => {
          console.log(error);
        });
      },