Angular2 提供自定义 Http 不起作用

Question

我们需要一个全局空间来捕获 http 401,403 和 500 响应。我查看了一些教程并尝试了一种扩展 http 的方法。这是我的自定义 HTTP（大部分是从网上复制的）

import { Http, ConnectionBackend, Request, RequestOptions, RequestOptionsArgs, Response, Headers} from '@angular/http';
import { Router} from '@angular/router';
import { Injectable} from '@angular/core';
import { Observable} from 'rxjs/Rx';

@Injectable()


export class CustomHttp extends Http {

    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private _router : Router) {
        super(backend, defaultOptions);
    }

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.request(url, options));
    }

    get(url: string, options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.get(url, options));
    }

    post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.post(url, body, this.getRequestOptionArgs(options)));
    }

    put(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.put(url, body, this.getRequestOptionArgs(options)));
    }

    delete(url: string, options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.delete(url, options));
    }

    getRequestOptionArgs(options?: RequestOptionsArgs): RequestOptionsArgs {
        if (options == null) {
            options = new RequestOptions();
        }
        if (options.headers == null) {
            options.headers = new Headers();
        }
        options.headers.append('Content-Type', 'application/json');
        return options;
    }

    intercept(observable: Observable<Response>): Observable<Response> {
        return observable.catch((err, source) => {
            console.log('CustomHttp Error status:  ' + err.status);
            return Observable.throw(err); 
        });
    }

}

这是我如何引导我的应用程序并尝试用我的实现替换默认 HTTP：

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { HTTP_PROVIDERS, Http, XHRBackend, RequestOptions} from '@angular/http';
import { ROUTER_DIRECTIVES, Router } from '@angular/router';
import { APP_ROUTER_PROVIDERS  } from './app.routes';
import { provide, PLATFORM_DIRECTIVES} from '@angular/core';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { CustomHttp } from './utils/http/customhttp';


    bootstrap(AppComponent, [
        APP_ROUTER_PROVIDERS,
        HTTP_PROVIDERS,
        provide(LocationStrategy, { useClass: HashLocationStrategy }),
        provide(PLATFORM_DIRECTIVES, { useValue: [ROUTER_DIRECTIVES], multi: true }),
        provide( Http, {
            useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions, router: Router) => new CustomHttp(xhrBackend, requestOptions, router),
            deps: [XHRBackend, RequestOptions, Router]
        }),
    ]);

没有编译错误，但是当我尝试使用默认提供程序而不是我的实现发出一些 http 请求时。我知道这一点是因为我故意调用了一个返回 500 的 webapi 端点，并且没有设置到我的 catch 子句中并编写日志语句。

这是我的 js 依赖项：

 "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.4",

    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",

    "lodash": "4.13.1",
    "angular2-in-memory-web-api": "0.0.14",
    "bootstrap": "^3.3.6"
  }

我在这里缺少什么胶水？

Answer 1

确保您没有在某些组件上提供 HTTP_PROVIDERS 或 Http，否则可能会使用它来代替（取决于提供它的确切位置）。

Answer 2

这对我有用。我必须配置我的基本服务 url。当我在本地运行和部署到产品服务器时，它应该检测环境。

@Injectable()
export class HttpService extends Http {

  static SERVICE_BASE_URL = '';

  constructor(backend: XHRBackend, options: RequestOptions) {
    super(backend, options);

    if (/http:\/\/(localhost|127.0.0.1)/.test(window.location.href)) {
      HttpService.SERVICE_BASE_URL = 'http://localhost:8000';
    } else {
      HttpService.SERVICE_BASE_URL = 'http://mywebsite.com/api';
    }
  }

  get(url: string, options?: RequestOptionsArgs): Observable<Response> {
    return super.get(this.toTargetUrl(url), options);
  }

  post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
    return super.post(this.toTargetUrl(url), body, options);
  }

  put(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
    return super.put(this.toTargetUrl(url), body, options);
  }

  delete(url: string, options?: RequestOptionsArgs): Observable<Response> {
    return super.delete(this.toTargetUrl(url), options);
  }

  toTargetUrl(url: string): string {
    return url = /^https?:/.test(url) ? url : HttpService.SERVICE_BASE_URL + url;
  }
}

这就是我在app.module.ts中的配置方式

providers: [
    {
        provide: Http,
        useFactory: HttpFactory,
        deps: [XHRBackend, RequestOptions]
    },
    UtilsProvider,
    LocalStorageProvider
]

export function HttpFactory(backend: XHRBackend, options: RequestOptions) {
    return new HttpService(backend, options);
}