angular 4 http拦截器：工厂没有被调用答案

【问题标题】：angular 4 http interceptor: Factory not getting calledangular 4 http拦截器：工厂没有被调用
【发布时间】：2017-07-31 22:05:01
【问题描述】：

我正在尝试将拦截器添加到我的 Angular 4 应用程序中。

我有以下拦截器代码

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

@Injectable()
export class CustomHttp extends Http {
    static get parameters() {
        return [[ConnectionBackend], [RequestOptions]];
    }
    constructor(private backend: ConnectionBackend,
        private defaultOptions: RequestOptions) {
        super(backend, defaultOptions);
    }

    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();
        }
        return options;
    }

    intercept(observable: Observable<Response>): Observable<Response> {
        debugger;
        //this.events.publish("httpInterceptor:request:initiated");
        return observable
            .do((res: Response) => {
                //this.events.publish("httpInterceptor:request:success");
            }, (err: any) => {
                //this.events.publish("httpInterceptor:request:failure", err);
            });
    }
}

export function HttpInterceptor(backend: ConnectionBackend,
    defaultOptions: RequestOptions) {
    debugger;
    return new CustomHttp(backend, defaultOptions);
}

我在 app.module 中使用如下

 @NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    HomeComponent,
    SpinnerComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpModule,
    HttpClientModule
  ],
  providers: [
    HttpEventHandler,
    XHRBackend,
    {
  provide: Http, useFactory: (xhrbackend, requestoptions, HttpEventHandler) => {
    return new CustomHttp(xhrbackend, requestoptions, HttpEventHandler);
  }, deps: [XHRBackend, RequestOptions, HttpEventHandler]
},
  ],
  bootstrap: [AppComponent, SpinnerComponent]
})
export class AppModule { }

以下是我使用的模块版本

    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",

但是没有一个调试器语句被命中。有人可以帮我吗？如果我将它注入任何组件，它会显示错误为“没有连接后端的提供者”。提前致谢。

【问题讨论】：

为什么不使用Angular 4.3中引入的支持拦截器的HttpClient？
@YakovFain 是的，我可以试试。但是由于至少有 15 个人在这个项目上工作，我不想升级和制造混乱。无论如何，我会转向它，但想知道是什么导致了这个问题。
从使用 Http 升级到 HttpClient 很容易。在现有代码中，只需注入 HttpClient 而不是 Http 并从现有订阅中删除 res.json()。IMO，这种方法更干净。
好的。非常感谢@YakovFain 我正在迁移到 HttpClient 我不知道它存在。而且我不知道为什么我将usefactory回调更改为{提供：Http，useFactory：（xhrbackend，requestoptions）=> {调试器；返回新的 CustomHttp(xhrbackend, requestoptions); }, deps: [XHRBackend, RequestOptions] }，它工作得很好。
你的应用模块没有提到 CustomHttp

标签： angular angular-http-interceptors angular-providers

【解决方案1】：

这里是角度 4.3 的参考：- https://angular.io/guide/http

在当前实现中使用 providers: [ HttpEventHandler, XHRBackend, CustomHttp, { provide: Http, useFactory: HttpInterceptor, deps: [XHRBackend, RequestOptions, HttpEventHandler] }, ],

【讨论】：