vue使用axios后，访问不到this中的变量

「爱情、让人受尽委屈。」 2022-05-29 10:16 534阅读 0赞

本文主要针对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);
            });
          },