Javascript 将http侦听器编写为类_Javascript_Angularjs_Typescript

Javascript 将http侦听器编写为类

javascript angularjs typescript

Javascript 将http侦听器编写为类,javascript,angularjs,typescript,Javascript,Angularjs,Typescript,我在用纯文本脚本编写角度http拦截器时遇到问题。我试图转换的代码如下所示： .config(['$httpProvider', function ($httpProvider) { var interceptor = ['$rootScope', '$q', 'httpBuffer', function ($rootScope, $q, httpBuffer) { function success(response) { return resp

我在用纯文本脚本编写角度http拦截器时遇到问题。我试图转换的代码如下所示：

.config(['$httpProvider', function ($httpProvider) {

    var interceptor = ['$rootScope', '$q', 'httpBuffer', function ($rootScope, $q, httpBuffer) {
        function success(response) {
            return response;
        }

        function error(response) {
            if (response.status === 401 && !response.config.ignoreAuthModule) {
                var deferred = $q.defer();
                httpBuffer.append(response.config, deferred);
                $rootScope.$broadcast('event:auth-loginRequired', response);
                return deferred.promise;
            }
            // otherwise, default behaviour
            return $q.reject(response);
        }

        return function (promise) {
            return promise.then(success, error);
        };

    }];
    $httpProvider.responseInterceptors.push(interceptor);
}])

第一部分很清楚，编写一个具有构造函数的类，该构造函数接受三个依赖项

$rootScope

、

$q

和

httpBuffer

。还要编写两个私有方法

success

和

response

class MyInterceptorClass {
    constructor(private $rootScope: ng.IRootScopeService, private $q: ng.IQService, private httpBuffer: HttpBuffer) {
    }

    private success(response: ng.IHttpPromiseCallbackArg<any>): ng.IHttpPromiseCallbackArg<any> {
        return response;
    }

    private error(response: ng.IHttpPromiseCallbackArg<any>): ng.IHttpPromiseCallbackArg<any> {
        if (response.status == 401 && !((<any>response.config).ignoreAuthModule)) {
            var deferred = this.$q.defer();
            this.httpBuffer.append(response.config, deferred);
            this.$rootScope.$broadcast('event:auth-loginRequired', response);

            return deferred.promise;
        }

        // Otherwise, default behavior
        return this.$q.reject(response);
    }
}

我遇到的问题是原始JavaScript的最后一部分，匿名函数的返回值。我将如何在TypeScript中创建它？据我所知，这在TypeScript中是一个无名的方法，但这是不可能的。

按名称注册它：

$httpProvider.interceptors.push（'myInterceptorClass'）
然后确保您的类也注册为服务：
yourApp.service（'myInterceptorClass'，myInterceptorClass）
配置设置如下
    .config(['$httpProvider', function ($httpProvider: ng.IHttpProvider) {
        $httpProvider.interceptors.push(AuthenticationInterceptor.Factory);
    }])

module Common.Security {
'use strict';

export class AuthenticationInterceptor {

    public static Factory($q: ng.IQService) {
        return new AuthenticationInterceptor($q);
    }

    constructor(private $q: ng.IQService) {
    }

    //Method name should be exactly "response" - http://docs.angularjs.org/api/ng/service/$http
    public response(response) {
        console.log(response);
        return response || this.$q.when(response);
    }

    public responseError(rejection) {
        console.log(rejection.status);
        if (rejection.status === 401) {
        }
        // Otherwise, default behavior
        return this.$q.reject(rejection);
    }
}

    .config(['$httpProvider', function ($httpProvider: ng.IHttpProvider) {
        $httpProvider.interceptors.push(AuthenticationInterceptor.Factory);
    }])

module Common {
'use strict';

export class AuthenticationInterceptor {

    private static _instance: AuthenticationInterceptor;

    public static Factory($q: ng.IQService) {
        AuthenticationInterceptor._instance = new AuthenticationInterceptor($q);

        return AuthenticationInterceptor._instance;
    }

    constructor(private $q: ng.IQService) {
    }

    //Method name should be exactly "response" - http://docs.angularjs.org/api/ng/service/$http
    public response(response) {
        var self = Common.AuthenticationInterceptor._instance;

        console.log(response);
        return response || self.$q.when(response);
    }

    public responseError(rejection) {
        var self = Common.AuthenticationInterceptor._instance;

        console.log(rejection.status);
        if (rejection.status === 401) {
        }

        // Otherwise, default behavior
        return self.$q.reject(rejection);
    }
}

您的实际类应该如下所示
    .config(['$httpProvider', function ($httpProvider: ng.IHttpProvider) {
        $httpProvider.interceptors.push(AuthenticationInterceptor.Factory);
    }])

module Common.Security {
'use strict';

export class AuthenticationInterceptor {

    public static Factory($q: ng.IQService) {
        return new AuthenticationInterceptor($q);
    }

    constructor(private $q: ng.IQService) {
    }

    //Method name should be exactly "response" - http://docs.angularjs.org/api/ng/service/$http
    public response(response) {
        console.log(response);
        return response || this.$q.when(response);
    }

    public responseError(rejection) {
        console.log(rejection.status);
        if (rejection.status === 401) {
        }
        // Otherwise, default behavior
        return this.$q.reject(rejection);
    }
}

    .config(['$httpProvider', function ($httpProvider: ng.IHttpProvider) {
        $httpProvider.interceptors.push(AuthenticationInterceptor.Factory);
    }])

module Common {
'use strict';

export class AuthenticationInterceptor {

    private static _instance: AuthenticationInterceptor;

    public static Factory($q: ng.IQService) {
        AuthenticationInterceptor._instance = new AuthenticationInterceptor($q);

        return AuthenticationInterceptor._instance;
    }

    constructor(private $q: ng.IQService) {
    }

    //Method name should be exactly "response" - http://docs.angularjs.org/api/ng/service/$http
    public response(response) {
        var self = Common.AuthenticationInterceptor._instance;

        console.log(response);
        return response || self.$q.when(response);
    }

    public responseError(rejection) {
        var self = Common.AuthenticationInterceptor._instance;

        console.log(rejection.status);
        if (rejection.status === 401) {
        }

        // Otherwise, default behavior
        return self.$q.reject(rejection);
    }
}

这就是我如何将httpinterceptor作为一个类编写的
module services {

export class ErrorHttpInterceptor {
    public $log:ng.ILogService;
    public $injector:ng.auto.IInjectorService;

    public responseError = (_rejection)=>{
       //handle error here
    };
    public request = (config)=>{
        config.withCredentials = true;
        return config;
    };
    public requestError = (rejection)=>{
        var $q:ng.IQService = this.$injector.get("$q");
        this.$log.log("requestError", rejection);
        return $q.reject(rejection);
    };
    static $inject = ['$injector', '$rootScope', '$q', '$window'];
    constructor($injector:ng.auto.IInjectorService, public $rootScope, public $q, public $window){
        this.$log = $injector.get('$log');
        this.$injector = $injector;
    }
  }
}

登记
 var app =angular.module('foo',[]);
 app.config(['$httpProvider', (_$httpProvider:ng.IHttpProvider)=>{
    _$httpProvider.interceptors.push('ErrorHttpInterceptor');

}]);

您需要执行以下操作：
公共响应=（响应）=>{}
公共响应错误=（拒绝）=>{}
因为在另一方面，你的“这个”将是未定义的。
要了解为什么需要此选项：
配置设置如下所示
    .config(['$httpProvider', function ($httpProvider: ng.IHttpProvider) {
        $httpProvider.interceptors.push(AuthenticationInterceptor.Factory);
    }])

module Common.Security {
'use strict';

export class AuthenticationInterceptor {

    public static Factory($q: ng.IQService) {
        return new AuthenticationInterceptor($q);
    }

    constructor(private $q: ng.IQService) {
    }

    //Method name should be exactly "response" - http://docs.angularjs.org/api/ng/service/$http
    public response(response) {
        console.log(response);
        return response || this.$q.when(response);
    }

    public responseError(rejection) {
        console.log(rejection.status);
        if (rejection.status === 401) {
        }
        // Otherwise, default behavior
        return this.$q.reject(rejection);
    }
}

    .config(['$httpProvider', function ($httpProvider: ng.IHttpProvider) {
        $httpProvider.interceptors.push(AuthenticationInterceptor.Factory);
    }])

module Common {
'use strict';

export class AuthenticationInterceptor {

    private static _instance: AuthenticationInterceptor;

    public static Factory($q: ng.IQService) {
        AuthenticationInterceptor._instance = new AuthenticationInterceptor($q);

        return AuthenticationInterceptor._instance;
    }

    constructor(private $q: ng.IQService) {
    }

    //Method name should be exactly "response" - http://docs.angularjs.org/api/ng/service/$http
    public response(response) {
        var self = Common.AuthenticationInterceptor._instance;

        console.log(response);
        return response || self.$q.when(response);
    }

    public responseError(rejection) {
        var self = Common.AuthenticationInterceptor._instance;

        console.log(rejection.status);
        if (rejection.status === 401) {
        }

        // Otherwise, default behavior
        return self.$q.reject(rejection);
    }
}

您的实际类应该如下所示
    .config(['$httpProvider', function ($httpProvider: ng.IHttpProvider) {
        $httpProvider.interceptors.push(AuthenticationInterceptor.Factory);
    }])

module Common.Security {
'use strict';

export class AuthenticationInterceptor {

    public static Factory($q: ng.IQService) {
        return new AuthenticationInterceptor($q);
    }

    constructor(private $q: ng.IQService) {
    }

    //Method name should be exactly "response" - http://docs.angularjs.org/api/ng/service/$http
    public response(response) {
        console.log(response);
        return response || this.$q.when(response);
    }

    public responseError(rejection) {
        console.log(rejection.status);
        if (rejection.status === 401) {
        }
        // Otherwise, default behavior
        return this.$q.reject(rejection);
    }
}

    .config(['$httpProvider', function ($httpProvider: ng.IHttpProvider) {
        $httpProvider.interceptors.push(AuthenticationInterceptor.Factory);
    }])

module Common {
'use strict';

export class AuthenticationInterceptor {

    private static _instance: AuthenticationInterceptor;

    public static Factory($q: ng.IQService) {
        AuthenticationInterceptor._instance = new AuthenticationInterceptor($q);

        return AuthenticationInterceptor._instance;
    }

    constructor(private $q: ng.IQService) {
    }

    //Method name should be exactly "response" - http://docs.angularjs.org/api/ng/service/$http
    public response(response) {
        var self = Common.AuthenticationInterceptor._instance;

        console.log(response);
        return response || self.$q.when(response);
    }

    public responseError(rejection) {
        var self = Common.AuthenticationInterceptor._instance;

        console.log(rejection.status);
        if (rejection.status === 401) {
        }

        // Otherwise, default behavior
        return self.$q.reject(rejection);
    }
}

必须获取具有完整命名空间的类实例，因为当接收到来自Angular“的回调时，”是未定义的。
这无助于我关于如何实现最后一个匿名方法的问题。如何注册此类拦截器？您将哪些参数传递给$httpProvider.interceptors.push（…）？这将如何工作？我的印象是，当我们在拦截器
中传递字符串时，angular要求使用module.factory（…）
以该名称注册服务。您好，我注意到提供的解决方案中没有一个包含任何类型。这是最佳实践吗？或者函数是否应该返回某种类型？我的回复返回了ng.ihttpromisecallbackarg，如果我只是想返回回复，它就起作用了，但是当我试图返回拒绝时，类型冲突了。删除类型将修复它。。。但是看起来我们真的应该使用某种类型的。谢谢你的回答。我也有一个问题，“这个”总是没有定义。为什么会发生这种情况？我在这段代码中面临一个问题。获取$q的错误。它显示未定义的。另外，你能解释一下这是怎么回事吗？我的意思是何时调用它以及如何创建实例。我对angular和TypeScripts非常陌生。这将不起作用。请查看线程@Abhijeet如何使Factory（）声明小型化安全？