Angular 4 - HTTP攔截器

Question

我正在嘗試在Angular 4中創建HTTP攔截器，但我有一些奇怪的錯誤。 以下是我的錯誤：

Argument of type 'Observable<Response>' is not assignable to parameter of type 'Observable<Response>'.

以下是我的代碼：

 import { Injectable } from '@angular/core'; import { Http, ConnectionBackend, RequestOptions, RequestOptionsArgs } from '@angular/http'; import { Router } from '@angular/router'; import { Observable } from 'rxjs/Observable'; import * as _ from 'lodash'; @Injectable() export class HttpInterceptor 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)); // Here is the error } get(url: string, options?: RequestOptionsArgs): Observable<Response> { return this.intercept(super.get(url, options)); // Here is the error } post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> { return this.intercept(super.post(url, body, this.getRequestOptionArgs(options))); // Here is the error } put(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> { return this.intercept(super.put(url, body, this.getRequestOptionArgs(options))); // Here is the error } delete(url: string, options?: RequestOptionsArgs): Observable<Response> { return this.intercept(super.delete(url, options)); // Here is the error } getRequestOptionArgs(options?: RequestOptionsArgs): RequestOptionsArgs { if (options == null) { options = new RequestOptions(); } if (options.headers == null) { options.headers = new Headers(); // Here is the error } options.headers.append('Content-Type', 'application/json'); return options; } intercept(observable: Observable<Response>): Observable<Response> { return observable.catch((err, source) => { if (err.status == 401 && !_.endsWith(err.url, 'api/auth/login')) { this._router.navigate(['/login']); return Observable.empty(); } else { return Observable.throw(err); } }); } } 

有誰知道這里出了什么問題？ 我嘗試了3個小時的調試，但無法找到任何線索。

編輯：

我也嘗試刪除所有內容並編寫如下代碼：

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

但它仍然給出同樣的錯誤：

Argument of type 'string | Request' is not assignable to parameter of type 'string | Request'. Type 'Request' is not assignable to type 'string | Request'.

Answer 1

Http攔截器已在Angular 4.3.4中實現，並在文檔中進行了描述 。

您需要實現HttpInterceptor接口的intercept方法，對請求執行某些操作，並調用next.handle(req)方法。

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

@Injectable()
export class NoopInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const changedReq = req.clone({headers: req.headers.set('My-Header', 'MyHeaderValue')});
    return next.handle(changedReq);
  }
}

在app的提供者部分注冊攔截器也是必要的

import {NgModule} from '@angular/core';
import {HTTP_INTERCEPTORS} from '@angular/common/http';

@NgModule({
  providers: [{
    provide: HTTP_INTERCEPTORS,
    useClass: NoopInterceptor,
    multi: true,
  }],
})
export class AppModule {}

Answer 2

akn的答案是正確的。 我試圖使其與http服務一起工作，但攔截器僅適用於httpClient服務。

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

constructor(private http: HttpClient) { }

Answer 3

全局可用的DOM類型（tsconfig中的"lib": ["dom"] ）包括與Angular使用的類型無關的Response和Request接口。

您需要從@angular/http導入Response和Request 。

Answer 4

以下說明完美地為我服務：

在app模塊中：

import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { myInterceptor} from './Interceptors/myInterceptor';

@NgModule({
    imports: [
...
    HttpClientModule,
  ],
  providers: [{
    provide: HTTP_INTERCEPTORS,
    useClass: MyInterceptor,
    multi: true
  }],
  bootstrap: [AppComponent]
})

在攔截器中：

import { Injectable } from '@angular/core';

import {
  HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse
} from '@angular/common/http';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import { HttpErrorResponse } from '@angular/common/http';
import { RequestOptions } from '@angular/http';
import { HttpHeaders } from '@angular/common/http';

@Injectable()
export class MyInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // when there is POST request
    if (req.method === 'POST') {
      const content_type = 'application/x-www-form-urlencoded';
      const req= req.clone({
        headers: req.headers.set('Content-Type', content_type),
        body: 'my body'
      });

      return next.handle(accessReq);
    }
  }
}

重要提示 ：http應該是HttpClient的一個實例！

constructor(
    private http: HttpClient, private accessTokenService: AccessTokenService
) { }
    return this.http.post(ingestURL, null)
        .map(res => {
            return res; // data returned from interceptor
        });

Answer 5

使用此邏輯可以在任何框架中攔截Ajax。

private bootstrapAjaxInterceptor() {
const _self = this;
const originalOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function (xhrMethod, requestUrl) {
  this.addEventListener('readystatechange', xhr => {
    switch (this.readyState) {
      case 1: _self.onAjaxStart(xhrMethod, requestUrl); break;
      case 4: _self.onAjaxStop(this.responseURL, this.response); break;
      default: // Nothing to handle here
    }
  }, false);
  originalOpen.apply(this, arguments);
};

}

這是Angular的完整示例。

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
interface AjaxRequest {
  url?: string;
  requestCount?: number;
  method?: string;
}
interface AjaxResponse {
  url?: string;
  requestCount?: number;
  response?: string;
}
@Injectable()
export class HttpInterceptor {
  public ajaxStart = new BehaviorSubject<AjaxRequest>({});
  public ajaxStop = new BehaviorSubject<AjaxResponse>({});
  private requestQueue: Array<any> = [];
  constructor() {
    this.bootstrapAjaxInterceptor();
  }
  public getRequestQueue() {
    return this.requestQueue;
  }
  private bootstrapAjaxInterceptor() {
    const _self = this;
    const originalOpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function (xhrMethod, requestUrl) {
      this.addEventListener('readystatechange', xhr => {
        switch (this.readyState) {
          case 1: _self.onAjaxStart(xhrMethod, requestUrl); break;
          case 4: _self.onAjaxStop(this.responseURL, this.response); break;
          default: // Nothing to handle here
        }
      }, false);
      originalOpen.apply(this, arguments);
    };
  }
  onAjaxStart(xhrMethod, requestUrl) {
    this.requestQueue.push(requestUrl.replace(/\?.*/, ''));
    this.ajaxStart.next({
      url: requestUrl,
      requestCount: this.requestQueue.length,
      method: xhrMethod
    });
  }
  onAjaxStop(responseURL, response) {
    const responseUrl = responseURL.split(/\?/)[0];
    this.requestQueue.forEach((urlEndpoint, i) => {
      if (new RegExp(`${urlEndpoint}$`).test(responseUrl)) {
        return this.requestQueue.splice(i, 1);
      }
    });
    this.ajaxStop.next({
      url: responseUrl,
      requestCount: this.requestQueue.length,
      response: response
    });
  }
}