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 无济于事。

我确定我遗漏了一些微小的东西，或者我已经把它复杂化了（向所有 get 请求添加单个参数有多难？）。

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 函数创建的对象。

你最终需要为这个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]
  })
]);

这里是对应的 plunkr：https://plnkr.co/edit/tITkBJcl4a5KVJsB7nAt。

这个实现的灵感来自于 TypeScript。有关详细信息，请参阅此问题：

• Angular 2 (Ionic 2): intercept ajax requests