HTTP変換リクエスト（角2）

Question

キャッシングが強制的に無効になるように、すべてのWebリクエストに1つのパラメータを追加しようとしています。すべてのリクエストの最後に、

?v=1535DC9D930 // Current timestamp in hex 

を追加するだけです。

私はこれをプレーンなES5 JSで書いていますが、すべてのドキュメントはTypescriptに変換されています。私はこれまで、次のいる：

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

アプリは完全に動作しますが、まだCustomHttpでconsole.log(this)が呼ばれることは決してありません、と私は、ブラウザでng.http.HTTP_PROVIDERSを検査するとき、それはCustomHttpを使用するためには表示されません。私はまた試みた：

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

私のboot.jsでは無駄です。

私は行方不明の小さなものがあるか、これを大いに複雑にしていると確信しています（すべての要求に単一のパラメータを追加するのはどれほど難しいでしょうか？）。

Answer 1

HTTP要求をES5で傍受することは、主にsuperのサポートがないために簡単ではありません。

まず同等_request、_getものにng.http.Httpオブジェクトのrequest、get、...メソッドを保存するための関数を作成します。これにより、super.get()のようなものをシミュレートすることができます。それ以外の場合は、独自のメソッドを定義するときにオーバーライドされます（そして失われます）。

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

次にあなたが拡張するカスタムHttpClassを作成することができng.core.Http 1：

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

あなたは、私がcreateHttpClass機能を使用して作成するオブジェクトとextends属性を活用することに気づくことができます。あなたはこのCustomHttpクラスのプロバイダに登録する必要があります最終的には

：https://plnkr.co/edit/tITkBJcl4a5KVJsB7nAt：ここ

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

は、対応するplunkrです。

この実装は、TypeScriptの実装からインスピレーションを受けています。詳細については、この質問を参照してください：

• Angular 2 (Ionic 2): intercept ajax requests