HTTP Transform request in Angular 2

Question

I am attempting to add a single parameter to all my web requests so that caching is forcibly disabled. All I want to do is add

?v=1535DC9D930 // Current timestamp in hex

to the end of every request.

I am writing this in plain ES5 JS, but all the documentation is in Typescript which is taking a little while to convert. I have the following so far:

(function(app) {
    app.CustomHttp = ng.core
        .Class({
            constructor: [ng.http.Http, function(http) {
                console.log(this);
                this.http = http;
            }],
            request: function() {
                return this.http.request.apply(arguments);
            },
            get: function() {
                return this.http.get.apply(arguments);
            },
            post: function() {
                return this.http.post.apply(arguments);
            },
            put: function() {
                return this.http.put.apply(arguments);
            },
            delete: function() {
                return this.http.delete.apply(arguments);
            },
            patch: function() {
                return this.http.patch.apply(arguments);
            },
            head: function() {
                return this.http.head.apply(arguments);
            }
        });
})(window.app || (window.app = {}));

(function(app) {
    document.addEventListener('DOMContentLoaded', function() {
        ng.core.enableProdMode();
        ng.platform.browser.bootstrap(
            app.AppComponent,
            [ng.core.provide(ng.http.Http, { useClass: app.CustomHttp })]
        ).catch(function(error) {
            console.error(error);
        });
    });
})(window.app || (window.app = {}));

The app fully works, yet the console.log(this) in the CustomHttp never gets called, and when I inspect ng.http.HTTP_PROVIDERS in the browser it doesn't appear to be using CustomHttp. I have also tried:

[ng.http.HTTP_PROVIDERS, ng.core.provide(ng.http.Http, { useClass: app.CustomHttp })]

In my boot.js to no avail.

I'm sure there is something tiny that I am missing, or that I have massively over complicated this (How hard can it be to add a single parameter to all get requests?).

Answer 1

Intercepting HTTP requests with ES5 only isn't so easy mainly because you don't have the support of super.

First create a function to save the request, get, ... methods of the ng.http.Http object into equivalent _request, _get ones. This allows to simulate something like super.get(). Otherwise they will be overriden (and lost) when defining your own methods.

function createHttpClass() {
  var Http = function() {}
  Http.prototype = Object.create(ng.http.Http.prototype);
  Http.prototype._request = Http.prototype.request;
  Http.prototype._get = Http.prototype.get;
  Http.prototype._post = Http.prototype.post;
  Http.prototype._put = Http.prototype.put;
  Http.prototype._delete = Http.prototype.delete;
  Http.prototype._head = Http.prototype.head;
  return Http;
}

Then you can create a custom HttpClass that extends the ng.core.Http one:

var CustomHttp = ng.core
  .Class({
    constructor: function(_backend, _defaultOptions) {
      this._backend = _backend;
      this._defaultOptions = _defaultOptions;
    },
    extends: createHttpClass(),
    request: function() {
      console.log('request');
      return this._request.apply(this, arguments);
    },
    get: function() {
      console.log('get');
      return this._get.apply(this, arguments);
    },
    (...)
  });

You can notice that I leverage the extends attribute with the object create using the createHttpClass function.

You need finally to register the provider for this CustomHttpclass:

ng.platform.browser.bootstrap(AppComponent, [
  ng.http.HTTP_PROVIDERS,
  ng.core.provide(ng.http.Http, {
    useFactory: function(backend, defaultOptions) {
      return new CustomHttp(backend, defaultOptions);
    },
    deps: [ng.http.XHRBackend, ng.http.RequestOptions]
  })
]);

Here is the corresponding plunkr: https://plnkr.co/edit/tITkBJcl4a5KVJsB7nAt.

This implementation is inspired from the TypeScript one. See this question for more details:

• Angular 2 (Ionic 2): intercept ajax requests