1. ホーム
  2. http

[解決済み] Angular 2 - subscribeからサーバーエラーをチェックする

2023-05-15 18:29:27

質問

このシナリオはAngular 2のドキュメントにあるはずなのですが、どこにも見当たりません。

以下がそのシナリオです。

  1. サーバー上で無効なフォーム(オブジェクトの作成)を送信する。
  2. サーバーが 400 bad request を返し、私がフォームに表示するエラーも表示される。
  3. subscribeが戻ってきた後、エラー変数か何かをチェックしたい(例:エラーがなければ、新しく作成された詳細ページにルーティングする)。

このような動作をイメージしています。

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の作成の成功/失敗をチェックしたいだけです。

どのように解決するのですか?

関連するRxJSのドキュメントに記載されているように .subscribe() メソッド は第三引数を取ることができ、それはエラーがなければ完了時に呼び出されます。

参考までに

  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() メソッド というメソッドがあり、呼び出しの成功/失敗にかかわらず完了時に呼び出されます。これは、結果に関係なく 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
      }
    );