Javascript Http拦截器无法正常工作

我已将angular应用程序从4升级到最新版本7。在这么多错误之后，我终于让它工作了，但现在有一个问题：服务不工作，就像它在控制台中没有给出任何错误，但也不工作一样

我认为问题在于我的Http拦截器和我丢失某些东西的工厂

有人能告诉我到底是什么问题吗

Http拦截器

导出类拦截HTTP扩展HttpClient
建造师(
后端：HttpBackend，
私家店，
私人喷丝头服务：喷丝头服务
) {
超级（后端）；
}
请求（url:string | HttpRequest，options？：any）：可观察{
this.showLoader（）；
返回此.tryCatch（super.request（this.getRequestOptionArgs（options）））
}
获取（url:string，options？：any）：可观察{
url=this.updateUrl（url）；
返回这个.tryCatch（super.get（url））；
}
post（url:string，body:string，options？：any）：可观察{
url=this.updateUrl（url）；
返回此.tryCatch(
super.post（url，body）
);
}
put（url:string，body:string，options？：any）：可观察{
url=this.updateUrl（url）；
返回此.tryCatch(
super.put（url，正文）
);
}
删除（url:string，options？：any）：可观察{
url=this.updateUrl（url）；
返回此.tryCatch（super.delete（url））；
}
补丁（url:string，body:any，options？：any）：可观察{
url=this.updateUrl（url）；
返回此.tryCatch(
super.patch（url，body）
);
}
私有updateUrl（请求：字符串）{
返回environment.origin+req；
}
私有getRequestOptionArgs（选项？：任意）：任意{
if（options.headers==null）{
options.headers=新的HttpHeaders（）；
}
options.headers.append（'Content-Type'，'application/json'）；
options.headers.append(
“授权”，
`承载${sessionStorage.AccessToken}`
);
返回选项；
}
专用tryCatch（obs：可观察）{
返回obs.pipe（catchError（（错误：HttpResponse，catch）=>{
if（error.status==401&&sessionStorage.AccessToken）{
sessionStorage.clear（）；
this.store.dispatch（{type:'LOGOUT'}）；
}
this.hideLoader（）；
返回ObservateThrowError（错误）；
}));
}

Http工厂

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

每当我登录时，它只是开始加载，没有其他，没有错误或任何事情，当我在应用程序模块中注释掉提供者时，它会说“404未找到错误”

有什么帮助吗

---

谢谢

我无法评论您在Angular 4中是如何制作拦截器的。但自从引入4.3以来，这里有一个关于如何在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);
      })
    );
  }
}

您可以检查

request

对象以检查请求类型（POST、GET）并根据需要对其执行任何操作

这可能是显而易见的（也可能不是），但HttpInterceptor只有在您的请求是通过Angular 4.3中介绍的HttpClient发出的情况下才起作用。如果您的请求是由其他http客户端（来自HttpModule、本机代码或其他库的较旧客户端）发出的，那么它将无法工作，AFAIK

---

另外，如果您尝试延迟加载拦截器，它将不会很简单（甚至不确定是否可能），因此首先尝试让它这样工作。

您是否在“网络”选项卡中看到传出HTTP请求？不知道问题出在哪里您可以提供调用此类的代码吗？哪个类@DánielBartaHttpClient。它真的被调用了吗？你能告诉我什么是StatentryKey.BaseUrl吗？对不起，这只是一个常量，appState只是应用程序中的任何服务。我将对其进行编辑，使其更通用。截取功能是如何使用HttpInterceptor的一个必需部分，但其内容只是一个示例。

@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 }
]