Angular 2 - 从订阅检查服务器错误答案

【问题标题】：Angular 2 - Checking for server errors from subscribeAngular 2 - 从订阅检查服务器错误
【发布时间】：2017-06-25 13:40:16
【问题描述】：

我觉得这个场景应该在 Angular 2 文档中，但我在任何地方都找不到。

这是场景

提交表单（创建对象）在服务器上无效
服务器返回 400 错误请求，并在表单上显示错误
订阅回来后，我想检查一个错误变量或其他东西（即如果没有错误>然后路由到新创建的详细信息页面）

我想它的工作原理是这样的：

this.projectService.create(project)
    .subscribe(
        result => console.log(result),
        error => {
            this.errors = error
        }
    ); 
}

if (!this.errors) {
    //route to new page
}

我对 Angular 2 很陌生，所以这可能是因为我对 Observable 的工作原理缺乏了解。我在表单上显示该数据没有问题，但无法弄清楚如何在 ts 组件中查看它。我真的只是想检查http创建的成功/失败。

【问题讨论】：

标签： http angular subscribe

【解决方案1】：

如相关 RxJS 文档中所述，.subscribe() method 可以采用第三个参数，如果没有错误，则在完成时调用该参数。

供参考：

[onNext] (Function)：为可观察序列中的每个元素调用的函数。

[onError] (Function)：在可观察序列异常终止时调用的函数。

[onCompleted] (Function)：在可观察序列正常终止时调用的函数。

因此，您可以在 onCompleted 回调中处理您的路由逻辑，因为它将在优雅终止时调用（这意味着调用时不会出现任何错误）。

this.httpService.makeRequest()
    .subscribe(
      result => {
        // Handle result
        console.log(result)
      },
      error => {
        this.errors = error;
      },
      () => {
        // 'onCompleted' callback.
        // No errors, route to new page here
      }
    );

附带说明，还有一个.finally() method，无论调用成功/失败，都会在完成时调用它。这在您总是希望在 HTTP 请求之后执行某些逻辑而不管结果如何（即，用于记录目的或用于某些 UI 交互（例如显示模式））的情况下可能会有所帮助。

Rx.Observable.prototype.finally(action)

在源 observable 序列正常或异常终止后调用指定的操作。

例如，这是一个基本示例：

import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/finally';

// ...

this.httpService.getRequest()
    .finally(() => {
      // Execute after graceful or exceptionally termination
      console.log('Handle logging logic...');
    })
    .subscribe (
      result => {
        // Handle result
        console.log(result)
      },
      error => {
        this.errors = error;
      },
      () => {
        // No errors, route to new page
      }
    );

【讨论】：

在我找到的所有关于 observable 错误处理的答案中，这是最好的一个。谢谢
另外请记住，http 拦截器可用于以更横向的方式处理这些错误 - javascript.plainenglish.io/… - 因此您不必在每次订阅时处理它们

【解决方案2】：

您可以通过以下方式实现

    this.projectService.create(project)
    .subscribe(
        result => {
         console.log(result);
        },
        error => {
            console.log(error);
            this.errors = error
        }
    ); 
}

if (!this.errors) {
    //route to new page
}

【讨论】：

【解决方案3】：

请注意，从 6.4 开始不推荐使用以前的带有回调的语法，并将在 8.0 中删除。而不是

of([1,2,3]).subscribe(
    (v) => console.log(v),
    (e) => console.error(e),
    () => console.info('complete') 
)

你现在应该使用

of([1,2,3]).subscribe({
    next: (v) => console.log(v),
    error: (e) => console.error(e),
    complete: () => console.info('complete') 
})

https://rxjs.dev/deprecations/subscribe-arguments

【讨论】：