如何在 RxJs Observable 中捕获失败和取消的请求？答案

【问题标题】：How to catch failed and canceled request in RxJs Observable?如何在 RxJs Observable 中捕获失败和取消的请求？
【发布时间】：2018-11-24 11:00:42
【问题描述】：

一段时间以来，我注意到我有一些 XHR 以没有 HTTP 状态但处于取消或失败状态结束。

它发生在 Chrome 上。在 Firefox 上我没有。

我的应用适用于 Angular 4 和 RxJs 5。

是否有任何解决方案可以帮助我捕捉“这个错误”。我称它为“错误”，但实际上并没有错误，因为如果有我可以轻松捕获它们。

在 RxJs 中，当我使用 catch 时，它不会触发，finally 也不会触发（或者它会在我的订阅结束后触发）。我也尝试过使用 forkJoin、zip 或 concat、flatMap 或 switchMap 之类的东西，但在任何情况下似乎都不起作用。

【问题讨论】：

【解决方案1】：

我不确定取消的请求是否会触发错误状态，但您也可以向可观察链添加超时，这将在最后触发错误。

http.get(..).timeout(2000).catch()

【讨论】：

【解决方案2】：

正如您在评论中提到的，当您在查看页面（即 .html）上显示这些内容时遇到 XSS 问题时，不会触发捕获。我认为您需要使用 DomSanitizer。

DomSanitizer 有助于防止跨站点脚本安全漏洞 (XSS) 通过清理值以在不同的 DOM 上下文中安全使用 (Detail description of DomSanitization)

在您的component.ts 文件中使用

import { DomSanitizer } from '@angular/platform-browser';

this.yourVariable = domsanitizer.bypassSecurityTrustHtml('<p>stack Overflow</p>');

并在视图中使用yourVariable，如下所示 <div [innerHtml]="yourVariable"></div>

这不会让您在 chrome 上出错。

【讨论】：