Http攔截器沒有工作角7

Question

我已經將我的角度應用程序從4升級到最新版本7.經過這么多錯誤我終於得到了它的工作，但現在有一個問題：服務不起作用，就像它沒有在控制台中給出任何錯誤但是沒有正常工作。

我認為問題出在我的Http攔截器和我失蹤的工廠。

有人可以告訴我這是什么問題嗎？

Http攔截器

  export class InterceptedHttp extends HttpClient
  constructor(
    backend: HttpBackend,
    private store: Store<any>,
    private spinnerService: SpinnerService
  ) {
    super(backend);
  }

  request( url: string | HttpRequest<any>, options?: any): Observable<any> {
    this.showLoader();
    return this.tryCatch(super.request(this.getRequestOptionArgs(options)))
  }

  get(url: string, options?: any): Observable<any> {
    url = this.updateUrl(url);
    return this.tryCatch(super.get(url));
  }

  post(url: string, body: string, options?: any): Observable<any> {
    url = this.updateUrl(url);
    return this.tryCatch(
      super.post(url, body)
    );
  }

  put(url: string, body: string, options?: any): Observable<any> {
    url = this.updateUrl(url);
    return this.tryCatch(
      super.put(url, body)
    );
  }

  delete(url: string, options?: any): Observable<any> {
    url = this.updateUrl(url);
    return this.tryCatch(super.delete(url));
  }

  patch(url: string, body: any, options?: any): Observable<any> {
    url = this.updateUrl(url);
    return this.tryCatch(
      super.patch(url, body)
    );
  }

  private updateUrl(req: string) {
    return environment.origin + req;
  }

  private getRequestOptionArgs(options?: any): any {
    if (options.headers == null) {
      options.headers = new HttpHeaders();
    }
    options.headers.append('Content-Type', 'application/json');
    options.headers.append(
      'Authorization',
      ` Bearer ${sessionStorage.AccessToken}`
    );

    return options;
  }

  private tryCatch(obs: Observable<any>) {
    return obs.pipe(catchError((error: HttpResponse<any>, caught) => {
      if (error.status === 401 && sessionStorage.AccessToken) {
        sessionStorage.clear();
        this.store.dispatch({type: 'LOGOUT'});
      }
      this.hideLoader();
      return observableThrowError(error);
    }));
  }

Http工廠

export function httpFactory(xhrBackend: HttpXhrBackend,
  store: Store<any>, spinnerService: SpinnerService): HttpClient {
  return new InterceptedHttp(xhrBackend, store, spinnerService);
}

app模塊中的提供者

 {
   provide: HttpClient,
   useFactory: httpFactory,
   deps: [HttpXhrBackend, Store, SpinnerService]
 },

每當我登錄它只是開始加載，沒有別的，沒有錯誤或任何東西，當我在應用程序模塊中注釋掉提供程序時，它說“404 not found error”。

有幫助嗎？

謝謝

Answer 1

無法評論你是如何在Angular 4中做攔截器的。但是自從引入了4.3 HttpInterceptor所以這里是一個關於如何在Angular 7中進行http攔截的例子：

@Injectable()
export class ApiInterceptor implements HttpInterceptor {
  constructor(private someService: SomeService) {}

  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    return this.someService.getBaseUrl().pipe(
      mergeMap(baseUrl => {
        const apiRequest = data
          ? request.clone({ url: `${baseUrl}${request.url}` })
          : request;

        return next.handle(apiRequest);
      })
    );
  }
}

下面是一個攔截示例，除了返回請求之外什么都不做：

intercept(
     request: HttpRequest<any>,
     next: HttpHandler
): Observable<HttpEvent<any>> {
     return next.handle(request);
});

如何提供：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
// ...
providers: [
    { provide: HTTP_INTERCEPTORS, useClass: ApiInterceptor, multi: true }
]

您可以檢查request對象以檢查請求類型（POST，GET）並使用它執行任何操作。

這可能是顯而易見的（或不是），但只有在使用Angular 4.3中引入的HttpClient進行請求時，HttpInterceptor 才有效 。 如果您的請求是由其他http客戶端（來自HttpModule的舊客戶端，本機代碼或其他庫）提出的，那么它將不起作用，AFAIK。

此外，如果你試圖延遲加載攔截器，它將不會直截了當（甚至不確定它是否可能），所以首先嘗試讓它像這樣工作。