Angular 2 - 从订阅检查服务器错误 [英] Angular 2 - Checking for server errors from subscribe

问题描述

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

I feel like this scenario should be in the Angular 2 docs, but I can't find it anywhere.

这是方案

1. 提交无效的表格（创建对象）在服务器上


2. 服务器返回400错误请求，错误我显示在表单上


3. 订阅回来后，我想查看错误变量或其他东西（即，如果没有错误>然后路由到新创建的详细信息页面）

我想它的工作方式如下： / p>

I imagine it working something like this:

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 create的成功/失败。

I'm very new to Angular 2 so this may come from my lack of understanding in how an Observable works. I have no issue with displaying that data on the form, but can't figure out how to see it within the ts component. I really just want to check the success/fail of the http create.

推荐答案

如相关RxJS文档中所述，< a href =https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/subscribe.md =noreferrer> .subscribe（） 方法可以采用在完成时调用的第三个参数，如果没有错误。

As stated in the relevant RxJS documentation, the .subscribe() method can take a third argument that is called on completion if there are no errors.

供参考：

1. [onNext] （ Function ）：调用可观察序列中每个元素的函数。


2. [onError] （ Function ）：在可观察序列的异常终止时调用的函数。


3. [onCompleted] （ Function ）：正常终止可观察序列时调用的函数。

1. [onNext] (Function): Function to invoke for each element in the observable sequence.
2. [onError] (Function): Function to invoke upon exceptional termination of the observable sequence.
3. [onCompleted] (Function): Function to invoke upon graceful termination of the observable sequence.

因此，您可以在 onCompleted 回调因为它会在正常终止时被调用（这意味着在调用它时不会有任何错误）。

Therefore you can handle your routing logic in the onCompleted callback since it will be called upon graceful termination (which implies that there won't be any errors when it is called).

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

---

作为旁注，还有一个< a href =https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/finally.md =noreferrer> .finally（） 方法，无论呼叫成功/失败，都会在完成时调用。这可能在您总是希望在HTTP请求之后执行某些逻辑而不管结果的情况下有用（例如，用于记录目的或某些UI交互，例如显示模态）。

---

As a side note, there is also a .finally() method which is called on completion regardless of the success/failure of the call. This may be helpful in scenarios where you always want to execute certain logic after an HTTP request regardless of the result (i.e., for logging purposes or for some UI interaction such as showing a modal).

Rx.Observable.prototype.finally（action）

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

Invokes a specified action after the source observable sequence terminates gracefully or exceptionally.

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

For instance, here is a basic example:

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
      }
    );

这篇关于Angular 2 - 从订阅检查服务器错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！