web-dev-qa-db-ja.com

Angular 2-サブスクライブによるサーバーエラーの確認

このシナリオはAngular 2ドキュメントにあるべきだと思いますが、どこにもありません。

ここにシナリオがあります

  1. サーバー上で無効なフォームを送信する（オブジェクトを作成する）
  2. サーバーがフォームに表示するエラーとともに400の不正なリクエストを返します
  3. サブスクライブが戻った後、エラー変数または何かをチェックしたい（つまり、エラーがなければ>新しく作成された詳細ページにルーティングする）

私はそれが次のように働くことを想像します：

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の成功/失敗を確認したいだけです。

httpangularsubscribe
43
Stephanie

関連するRxJSドキュメントで述べられているように、 .subscribe() method は、エラーがない場合に完了時に呼び出される3番目の引数を取ることができます。

参考のため：

  1. [onNext]（Function）：オブザーバブルシーケンスの各要素に対して呼び出す関数。
  2. [onError]（Function）：オブザーバブルシーケンスの例外終了時に呼び出す関数。
  3. [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)

ソース監視可能シーケンスが正常にまたは例外的に終了した後、指定されたアクションを呼び出します。

たとえば、基本的な例を次に示します。

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
      }
    );
94
Josh Crozier

次の方法で達成できます

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

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