Angular Http 请求极其慢

Question

我的 Angular 2 应用程序连接到 Laravel api 服务。当我通过 Postman 拨打电话时，大约需要 500 毫秒。但是，当通过 Angular 应用程序执行调用时，加载时间大约需要 8 秒以上。

看起来该请求在很长一段时间内处于待处理状态。当您单击按钮导航到慢速页面时，请求将显示在网络选项卡中，并且应用程序会冻结，网络选项卡中的请求将显示待处理状态。

过了一会儿，当页面完全加载时，Edge 的网络选项卡中的请求显示 800 毫秒。看起来请求本身没问题，但由于某种原因需要很长时间才能执行。我在拦截器中添加了一个性能计数器。拦截器性能通知时间为 16299.5 毫秒。

经过研究，我已经实现了 Connection: close to headers 但在我的网站上出现错误： Refused to set unsafe header "Connection"

我还添加了 ngOnDestroy 但这似乎也不会影响速度。

编辑： chrom / firefox 和 Edge 之间存在显着差异。看起来 Edge 比其他 2 慢很多倍。

你知道为什么这么慢吗？

代码

:

getRequest(url: string, requestParams: any = {}): Observable<any> {
    return this.http.get(environment.apiUrl + url, {params: requestParams});
}

"

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  const begin = performance.now();
    const authData = this.authenticationService.getAuthenticationData();

    if (authData){
      const head = {'Authorization': 'Bearer ' + authData.plainTextToken};
      const modifiedRequest = request.clone({
        headers: new HttpHeaders(head).set('X-UserId', authData.curUser['UserId'].toString())
      });
      return next.handle(modifiedRequest).pipe(
        finalize(() => {
          this.logRequestTime(begin, request.url, request.method);
        })
      );
    }else{
      return next.handle(request).pipe(
        finalize(() => {
          this.logRequestTime(begin, request.url, request.method);
        })
      );
    }
}

private logRequestTime(startTime: number, url: string, method: string): void {
    const requestDuration = `${performance.now() - startTime}`;
}

api.service.tsauthentication.interceptor.tsoverview.component.tsPostman

ngOnInit(): void {
    this.apiSource = this.store.fetchApi().subscribe(responseData => {
        this.store.addArrayData(responseData);
    });
}

ngOnDestroy(): void {
    this.apiSource.unsubscribe();
}

<

a href="https://i.sstatic.net/YZQrP.jpg" rel="nofollow noreferrer >

网络待处理：

编辑 13:11 我发现在请求期间 CPU 达到 100%。