我如何访问类属性内的一个$http调用的.success

How can I access class properties inside the .success of an $http call?

本文关键字：一个 http success 调用 属性 何访问 访问      更新时间：2023-09-26

我有这个Typescript代码:

class UserService implements IUserService {
    data = {
    loginMessage: ""
    };
    static $inject = [
        '$http'
    ];
    constructor(
        private $http
        ) {
    }
    authenticate = () => {
        // This works 
        this.data.loginMessage = 'Authenticating ...';
        this.$http({
            method: 'POST',
            url: '/Token',
            data: 'xxx',
        })
       .success((data1, status, headers, cfg) => {
           // Here the this.data is undefined
           this.data.loginMessage = 'Okay';
       })
    })
}

这只是一个例子，但它显示了我的问题。我希望能够修改.success内部的属性数据。然而，当我尝试这样做时，它说this.data是未定义的。

谁能告诉我怎样才能解决这个问题?

更新:

这是一个解决方案，我发现，这似乎工作。我在身份验证函数中定义了self。有人能对此发表评论吗?这样做是否合理，还是会有其他潜在的问题?

class UserService implements IUserService {
    data = {
    loginMessage: ""
    };
    static $inject = [
        '$http'
    ];
    constructor(
        private $http
        ) {
    }
    authenticate = () => {
        var self = this;
        // This works 
        this.data.loginMessage = 'Authenticating ...';
        self.$http({
            method: 'POST',
            url: '/Token',
            data: 'xxx',
        })
       .success((data1, status, headers, cfg) => {
           // Here the this.data is now defined
           self.data.loginMessage = 'Okay';
       })
    })
}

函数中的this不是服务，而是函数(请参阅函数作用域)。
使用本地self变量。

  constructor(private $http) {
    var self = this; // add this
  }
 authenticate = () => {
        this.data.loginMessage = 'Authenticating ...';
        this.$http({
            method: 'POST',
            url: '/Token',
            data: 'xxx',
        })
       .success((data1, status, headers, cfg) => {
           // this is the function!!!
           self.data.loginMessage = 'Okay';
       })
    })

这样的东西可能会起作用吗?

class UserService {
data = {
    loginMessage: ""
};
static $inject = [
    '$http'
];
constructor(){
    this.authenticate();
}

private authenticate(): void {
    // This works 
    this.data.loginMessage = 'Authenticating ...';
    this.$http({
        method: 'POST',
        url: '/Token',
        data: 'xxx',
    })
   .success((data1, status, headers, cfg)=>this.onSuccess(data1, status, headers, cfg));
}
private onSuccess(data1, status, headers, cfg){
       // Here the this.data is undefined
       this.data.loginMessage = 'Okay';
}

}

基本上，您想要的是成功函数使用主类的this，对吗?

编译成:

var UserService = (function () {
function UserService() {
    this.data = {
        loginMessage: ""
    };
    this.authenticate();
}
UserService.prototype.authenticate = function () {
    var _this = this;
    // This works
    this.data.loginMessage = 'Authenticating ...';
    this.$http({
        method: 'POST',
        url: '/Token',
        data: 'xxx'
    }).success(function (data1, status, headers, cfg) {
        return _this.onSuccess(data1, status, headers, cfg);
    });
};
UserService.prototype.onSuccess = function (data1, status, headers, cfg) {
    // Here the this.data is undefined
    this.data.loginMessage = 'Okay';
};
UserService.$inject = [
    '$http'
];
return UserService;
})();

在我看来是正确的(还没有测试)

在这里分享链接

如果您将authenticate定义为方法而不是函数，它将工作。你不需要按照上面的建议(正确地)执行var self = this;。

这将使类看起来像这样:

class UserService implements IUserService {
    data = {
    loginMessage: ""
    };
    static $inject = [
        '$http'
    ];
    constructor(
        private $http
        ) {
    }
    private authenticate(): void {
        // This works 
        this.data.loginMessage = 'Authenticating ...';
        this.$http({
            method: 'POST',
            url: '/Token',
            data: 'xxx',
        })
       .success((data1, status, headers, cfg) => {
           // Here the this.data is undefined
           this.data.loginMessage = 'Okay';
       })
    })
}
相关文章：