angular2 HttpClient中的攔截器不起作用？

1.我按照angular官方文檔實(shí)現(xiàn)了httpclient發(fā)出http請(qǐng)求。文檔鏈接
2.我嘗試按文檔在項(xiàng)目中實(shí)現(xiàn)攔截器,這是我的代碼：

Universal.Interceptor.ts

import { Injectable, Inject,Injector, Optional } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/observable';
import { StorageService } from '../../shared/storage.service';
import { enable, destroy } from 'splash-screen';
import 'rxjs/add/operator/do';

@Injectable()
export class UniversalInterceptor implements HttpInterceptor {
  private _StorageService: StorageService;
  constructor(private injector: Injector) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log(req)
    return next.handle(req);

  }

}```

app.module.ts

...
**import { HTTP_INTERCEPTORS } from '@angular/common/http';**
**import { UniversalInterceptor } from './core/Interceptor/Universal.Interceptor';**

@NgModule({
  declarations: [
    AppComponent
  ],
...
  **providers: [{ provide: HTTP_INTERCEPTORS, useClass: UniversalInterceptor, multi: true }],**
  bootstrap: [AppComponent]
})

 }

項(xiàng)目的http請(qǐng)求還是正常的，但攔截器的console.log沒(méi)有打印，項(xiàng)目也沒(méi)有報(bào)錯(cuò)，是否引入少了內(nèi)容？Universal.Interceptor.ts文件是我手動(dòng)創(chuàng)建的，是否跟這個(gè)有關(guān)系？有沒(méi)有使用這個(gè)攔截器的

回答

編輯回答

瞄小懶

你好，升級(jí)到4.3以后，新多出個(gè)HttpClient模塊，如果要使用攔截器，需要，將老的http改為，HttpClient.
相關(guān)代碼：

import { HttpClient } from '@angular/common/http';

this.http.get<UserResponse>('https://api.github.com/users/seeschweiler').subscribe(
  data => {
    console.log("User Login: " + data.login);
    console.log("Bio: " + data.bio);
    console.log("Company: " + data.company);
  },
  err => {
    console.log("Error occured.")
  }
);

2018年6月26日 16:29

編輯回答

孤影

我猜是你的攔截器并沒(méi)有被使用。參考如下：

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

@Injectable()
export class CustomHttp extends Http {
 
  constructor(
      backend: ConnectionBackend,
      defaultOptions: RequestOptions
  ) {
      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.put(url, this.getRequestOptionArgs(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 > {
         console.log('請(qǐng)求前');
        return Observable.create((observer) => {
          observable.subscribe(res => {
            observer.next(res);
          }, (err) => {
            observer.error(err);
          }, () => {
             console.log('complete');
             observer.complete(); 
          });
        });
    }

}

export let providerHttp = ( backend: XHRBackend,
        defaultOptions: RequestOptions
       ) => new CustomHttp(backend, defaultOptions);

然后在app.module.ts中

providers: [
         {
             provide: Http,
             useFactory: providerHttp,
             deps: [XHRBackend, RequestOptions, LoadingBarService]
         }
    ],

2017年7月7日 04:58

編輯回答

吢涼

有可能是你的路由懶加載的問(wèn)題，在路由加載的第一個(gè)組件是有作用的，你可以試一下

2018年7月23日 10:03

編輯回答

笑忘初

這是我的攔截器：

import {Injectable} from "@angular/core";
import {HttpEvent, HttpHandler, HttpInterceptor} from "@angular/common/http";
import {HttpRequest} from "@angular/common/http";
import {Observable} from "rxjs/Observable";

@Injectable()
export class MyInterceptor implements HttpInterceptor {

  constructor() {
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const clonedRequest = req.clone({
      headers: req.headers.set('X-CustomAuthHeader', 'AuthHeader')
    });
    console.log('request', clonedRequest);
    console.log("Observable", next.handle(clonedRequest));
    return next.handle(clonedRequest);
  }
}

2017年6月16日 23:31