Richiesta di trasformazione HTTP in Angular 2

Question

Sto tentando di aggiungere un singolo parametro a tutte le mie richieste Web in modo che la memorizzazione nella cache sia disabilitata forzatamente. Tutto quello che voglio fare è aggiungere

?v=1535DC9D930 // Current timestamp in hex 

fino alla fine di ogni richiesta.

Sto scrivendo questo in semplice ES5 JS, ma tutta la documentazione è in dattiloscritto che impiega un po 'di tempo a convertire. Ho il seguente finora:

(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 = {})); 

L'applicazione funziona perfettamente, ma il console.log(this) nel CustomHttp non viene mai chiamato, e quando ho ispezionare ng.http.HTTP_PROVIDERS nel browser non sembra essere utilizzando CustomHttp. Ho anche provato:

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

Nel mio boot.js inutilmente.

Sono sicuro che c'è qualcosa di minuscolo che mi manca, o che ho massicciamente complicato questo (Quanto può essere difficile aggiungere un singolo parametro a tutte le richieste?).

Answer 1

L'intercettazione delle richieste HTTP con ES5 non è così semplice principalmente perché non si dispone del supporto di super.

Innanzitutto creare una funzione per salvare i request, get, ... metodi dell'oggetto ng.http.Http in equivalenti _request, _get quelli. Ciò consente di simulare qualcosa come super.get(). Altrimenti saranno sovrascritte (e perse) quando si definiranno i propri metodi.

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; 
} 

Quindi è possibile creare un custom HttpClass che estende la ng.core.Http uno:

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); 
    }, 
    (...) 
    }); 

Si può notare che l'attributo di leva extends con l'oggetto creare utilizzando la funzione createHttpClass.

È necessario, infine, per registrare il provider per questa classe CustomHttp:

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] 
    }) 
]); 

Ecco corrispondente plunkr: https://plnkr.co/edit/tITkBJcl4a5KVJsB7nAt.

Questa implementazione è ispirata a quella di TypeScript. Vedere questa domanda per maggiori dettagli:

• Angular 2 (Ionic 2): intercept ajax requests