Angular 6 - HTTP 拦截器和网络 :: ERR_TIMED_OUT

Question

我的问题是关于最近我一直摸不着头脑的事情——

在我的拦截器中，我有一些代码可以解析和处理某些错误，并将根据错误的状态代码等以某些方式执行操作（我没有包含此代码，因为它实际上对这个问题没有任何作用，但如果有人有充分的理由为什么我应该包括它，我绝对可以。

我试图弄清楚如何net :: ERR_TIMED_OUT在拦截器中处理（使用谷歌浏览器/歌剧）。我已经追踪到一个点，我可以知道请求正在构建并正在“处理”，但在那之后，请求和响应都消失了。我最初的想法是，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 考虑到了一切，事实上，这似乎解决了我遇到的问题（除了构建其他东西来对某些错误做出反应等）

我构建的拦截器代码看起来像这样..（我选择 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 射入太空，并且不能保证它们在实际超时的情况下会返回。这也会覆盖任何基于浏览器的超时（如果我的网络调用在 RxJS 运算符的 20 秒内超时，则浏览器中不会再次超时。错误会被抛出，生活还会继续）。我发现错误处理能够对错误做出反应也是一件很棒的事情，因此这一切都变得更好。

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

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