Angular 6 - HTTP 拦截器和 net::ERR_TIMED_OUT

Question

我的问题是我最近一直在摸不着头脑的事情 --

在我的拦截器中，我有解析和处理某些错误的代码，并且会根据错误的状态代码等以某些方式采取行动(我没有包括这段代码，因为它对这个问题没有任何作用, 但如果有人有充分的理由说明为什么我应该包括它，我绝对可以。

我想弄清楚如何在我的拦截器中处理 net::ERR_TIMED_OUT(使用 google chrome/opera)。我已经追踪到可以判断正在构建和“处理”请求的程度，但在那之后，请求和响应都消失了。我最初的想法是某处有一个 XMLHttpRequest 错误，它以某种方式被抑制并且响应被丢弃。

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const intercepted = this.setHeaders(req);
    return this.SetPendingRequests(next.handle(intercepted))
            .pipe(catchError((err): Observable<HttpEvent<any>> => {
                return this.ParseErrorResponse(err);
            }));
}

我也尝试过向它添加 finalize(() => {}) 并且在所有情况下都可以正常工作，除了这个，其中 ERR_TIMED_OUT 只是基本上似乎决定所有的事情都必须为此停下来。

我也尝试过直接连接到 XMLHttpRequest 并且 Angular 对此不太友善 - 因为我觉得问题的根源可能源于它本身。

所有 google/stackoverflow 搜索几乎都指向它是一个本地问题，但我觉得好像应该有某种方法可以在我的代码中处理它，所以如果用户在使用我的应用程序时遇到这个错误，我就能妥善处理。基本上，我只想要对 ERR_TIMED_OUT 的任何请求(奇怪的是，其他浏览器基本错误会返回“未知错误”类型的错误——这是我发现的唯一奇怪的异常值，它只是简单地停止一切。我想看看是否还有其他人遇到过这个问题/是否愿意帮助我解决这个问题。

感谢在此问题上提供的任何帮助，并提前致谢，

Answer 1

快速更新我的问题——我似乎在 RxJS 中找到了解决方案。事实证明 RxJS 拥有一切，事实上，这似乎解决了我遇到的问题(在构建其他东西以对某些错误使用react等)

我构建的拦截器代码看起来像这样......(我选择 20000 作为 Chrome 在我的实例中的默认值是浏览器超时 30 秒......)

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const intercepted = this.setHeaders(req);
    return this.SetPendingRequests(next.handle(intercepted))
            .pipe(timeout(20000),
            catchError((err): Observable<HttpEvent<any>> => {
                return this.ParseErrorResponse(err);
            }));
}

超时运算符应该返回一个可用的错误，而不是将 1 和 0 射入空间，并且不能保证它们在实际超时的情况下会返回。这也会覆盖任何基于浏览器的超时(如果我的网络调用在 20 秒内从 RxJS 运算符(operator)超时，它不会在浏览器中再次超时。错误被抛出并且生活继续)。能够对错误使用react也是一件很棒的事情，我发现在错误处理方面，这让事情变得更好。

还值得注意的是，这适用于网络调用 - 这也是我目前主要使用它的地方。

一如既往，我对更好/更优雅的解决方案持开放态度——毕竟我是一名工程师，而且永远是一名学生，但希望这对遇到与我类似问题的人有所帮助。