Typescript Snippet - $httpProvider

Mit Hilfe des Angular $httpProvider Providers, kann auf einfache Art und Weise das Verhalten des $http Services beeinflusst werden. Ein typisches Szenario ist die Registration eines eigenen Http-Interceptors um Fehlermeldungen abzufangen oder Request-Headers zu setzen.

Für Typescript bietet sich dazu das Interface ng.IHttpInterceptor an. Mit Hilfe einer Factory wird einer neue Instanz des Http-Interceptors erzeugt, und über den $httpProvider registriert.

namespace App {
  "use strict";

  class MyHttpInterceptor implements ng.IHttpInterceptor {
    constructor(myService: App.MyService) {}

    public request = (config: ng.IRequestConfig): ng.IRequestConfig => {
      config.headers["X-MyCustom-Header"] = myService.getValue();
      return config;
    };

    public requestError = (rejection: any): any => {
      console.error(rejection);
    };

    public response = <T>(
      response: ng.IHttpPromiseCallbackArg<T>
    ): ng.IHttpPromiseCallbackArg<T> => {
      return response;
    };

    public responseError = (rejection: any): any => {
      console.log(rejection);
    };
  }

  factory.$inject = ["MyService"];
  function factory(myService: App.MyService): ng.IHttpInterceptor {
    return new MyHttpInterceptor(myService);
  }

  configureHttpProvider.$inject = ["$httpProvider"];
  function configureHttpProvider($httpProvider: ng.IHttpProvider) {
    $httpProvider.interceptors.push(factory);
  }

  angular.module("app").config(configureHttpProvider);
}