在 AngularJS 和 Typescript 的回调中使用$http this

Using 'this' in $http callback with AngularJS and Typescript

本文关键字：http this 回调 AngularJS Typescript      更新时间：2023-09-26

我在服务中使用了承诺，然后在结果加载时，我想导航到另一个页面。

我的代码：

export class PicasaAuthenticator
{
    //  Constructor
    static $inject = [ '$window', '$location', '$http' ];
    constructor( private window : ng.IWindowService, private location : ng.ILocationService, private http : ng.IHttpService )
    {
    }
    //  Private Functions
    private validateToken( results : IAuthResults ) : void
    {
        if( results && results.access_token )
        {
            var validateTokenURL : string = "https://www.googleapis.com/oauth2/v1/tokeninfo";
            validateTokenURL += "?access_token=" + results.access_token;
            this.http.get<ITokenValidationResult>( validateTokenURL );
            this._validationPromise.then( this.handleTokenVerificationResult,this.handleTokenVerificationError );
        }
    }
    private handleTokenVerificationResult( successResponse : ng.IHttpPromiseCallbackArg<ITokenValidationResult> ) : void
    {
        this._validationPromise = null;
        if( successResponse.data.audience = client_id )
        {
            this.location.path( '/albums' );
        }
        else
        {
            alert( "audience does not match client ID" );
        }
    }
}

问题是这个位置当然不存在于handleTokenVerificationResult中。如何设置运行此函数的范围？我看到一个使用 var self = 这个的例子（无论如何我都不喜欢），但这不起作用。

感谢您的任何帮助。

它可能

不那么漂亮，但使用箭头函数表示法将正确保留this值，因此我会尝试将您的validateToken()函数更改为以下内容：

private validateToken( results : IAuthResults ) : void
{
    if( results && results.access_token )
    {
        var validateTokenURL : string = "https://www.googleapis.com/oauth2/v1/tokeninfo";
        validateTokenURL += "?access_token=" + results.access_token;
        this.http.get<ITokenValidationResult>( validateTokenURL );
        this._validationPromise.then( () => {
            this.handleTokenVerificationResult.apply(this, arguments); 
        }, () => { 
            this.handleTokenVerificationError.apply(this, arguments); 
        });
    }
}

或者，只需使用 Function.bind() 来保留 this 变量的值：

private validateToken( results : IAuthResults ) : void
{
    if( results && results.access_token )
    {
        var validateTokenURL : string = "https://www.googleapis.com/oauth2/v1/tokeninfo";
        validateTokenURL += "?access_token=" + results.access_token;
        this.http.get<ITokenValidationResult>( validateTokenURL );
        this._validationPromise.then(this.handleTokenVerificationResult.bind(this), this.handleTokenVerificationError.bind(this));
    }
}

但是，您应该注意，目前使用 .bind() 会破坏 TypeScript 中的类型信息，因此我主要坚持使用箭头函数来正确保留类型信息。

相关文章：