Angular 2中的HTTP轉換請求

Question

我正在嘗試向我的所有Web請求中添加一個參數，以便緩存被強制禁用。我想要做的只是添加

?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

僅使用ES5攔截HTTP請求並不那麼容易，主要是因爲您沒有super的支持。

首先創建一個函數來ng.http.Http對象的request，get ......方法存入相當於_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一個：

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

你可以注意到，我充分利用extends屬性與對象創建使用createHttpClass功能。

您需要最終以註冊該提供該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] 
    }) 
]); 

下面是相應的plunkr：https://plnkr.co/edit/tITkBJcl4a5KVJsB7nAt。

該實現受到TypeScript的啓發。看到這個問題的更多細節：

• Angular 2 (Ionic 2): intercept ajax requests