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

【问题标题】：Angular 6 - HTTP Interceptor and net :: ERR_TIMED_OUTAngular 6 - HTTP 拦截器和网络 :: ERR_TIMED_OUT
【发布时间】：2019-06-04 15:27:11
【问题描述】：

我的问题是关于我最近一直在摸索的事情——

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

我想弄清楚如何在我的拦截器中处理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 的任何请求（奇怪的是，其他浏览器基本错误返回“未知错误”类型的错误——这是我发现的唯一一个奇怪的异常值，它只是简单地停止了一切。我是看看是否有其他人遇到过这个问题/愿意帮助我解决这个问题。

感谢您对此事的任何帮助，并提前致谢，

【问题讨论】：

标签： angular http xmlhttprequest timeout interceptor

【解决方案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 射入太空，但不能保证在实际超时的情况下它们会返回。这也覆盖了任何基于浏览器的超时（如果我的网络调用在 20 秒内从 RxJS 操作员超时，它不会在浏览器中再次超时。错误被抛出并且生活继续）。能够对错误做出反应也是我在错误处理中发现的一件好事，所以这一切都会变得更好。

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

与往常一样，我愿意接受更好/更优雅的解决方案——毕竟我是一名工程师，而且永远是一名学生，但希望这可以帮助遇到与我类似问题的人。

【讨论】：