如何在 http 错误的情况下停止订阅答案

【问题标题】：How to stop subscribe in case of http error如何在 http 错误的情况下停止订阅
【发布时间】：2021-01-12 02:46:57
【问题描述】：

我正在寻找一个想法，当 Interceptor 抛出 HttpError 时，如何停止订阅任何方法。在我的 Angular 应用程序中，很少有组件可以使用以下方式从后端下载数据：

    getItems(){
this.isProcessing = true;
this.itemsService.getItems().subscribe((x) => {
this.itemList = x;
this.isProcessing = false;
});
}

当数据请求开始时，isProcessing 设置为 true，并且 spinner 开始循环。收到数据后就停止了。每个单独的 http 请求都通过 HttpInterceptor 向请求添加令牌，并且在任何 http 错误的情况下都有错误处理程序。当用户无权下载某些数据时，错误 403 来自后端。我想要做的是显示带有一些信息的模态，停止订阅发出该请求的任何组件中的方法，并将 isSpinning 设置为 false 就像没有发生任何事情一样。我是否应该在 Interceptor 中创建一些 observable 并在每种方法中使用它来判断是否停止订阅？

【问题讨论】：

如果你只是想停止订阅方法，只需在组件中添加 ngdestory 方法，然后取消订阅它

标签： angular typescript

【解决方案1】：

您需要使用错误回调，但只有在您未在拦截器中捕获错误时才有效

getItems(){
  this.isProcessing = true;
  this.itemsService.getItems().subscribe(
    (x) => {
      this.itemList = x;
      this.isProcessing = false;
    },
    (error) => { this.isProcessing = false; }
   }
  );
}

因此，您要么在拦截器中捕获错误（用于日志记录或任何其他逻辑）并将其扔回，要么根本不捕获它。

【讨论】：

但是如果我从拦截器中删除 403 处理程序并将其粘贴到每个方法中，它不会重复太多次吗？将处理程序放入拦截器的主要目的是只编写一次，然后在整个应用程序中使用。
你必须决定，要么使用拦截器处理后端错误的集中方法（对于全局处理微调器也很好）。或者，您在每个组件中处理它。我推荐第一种方法。
或者，您可以在 403、401 的情况下显示一些错误消息或在拦截器中全局重定向到某个路由（/login 或 /unauthorized...等）。在其他情况下 throw 将错误返回给组件进行处理。
“只有在你没有捕获拦截器中的错误时才有效”并不完全正确。您可以捕获错误并使用 RxJS 的 throwError 来返回一个错误的 observable。这是一个工作示例：stackblitz.com/edit/rxjs-ytkucd?file=index.ts
这就是我在回答末尾解释的内容

【解决方案2】：

您可以使用subscribe()方法的error回调如下：

getItems(){
  this.isProcessing = true;
  this.itemsService.getItems().subscribe(
    (x) => {
      this.itemList = x;
      this.isProcessing = false;
    },
    (error) => {
      // Create your modal here
      this.isProcessing = false;
    }
  );
}

供参考：https://rxjs-dev.firebaseapp.com/guide/observable

【讨论】：

【解决方案3】：

试试这个

getItems(){
    this.isProcessing = true;
    this.itemsService.getItems().subscribe((x) => {
    if(x !=null || x != undefined) {
      this.itemList = x;
       this.isProcessing = false;
    } 
  else {
    this.isProcessing = false;
  }
  });

【讨论】：