[解決済み] Angular 2 - subscribeからサーバーエラーをチェックする
2023-05-15 18:29:27
質問
このシナリオはAngular 2のドキュメントにあるはずなのですが、どこにも見当たりません。
以下がそのシナリオです。
- サーバー上で無効なフォーム(オブジェクトの作成)を送信する。
- サーバーが 400 bad request を返し、私がフォームに表示するエラーも表示される。
- 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()
メソッド
は第三引数を取ることができ、それはエラーがなければ完了時に呼び出されます。
参考までに
[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()
メソッド
というメソッドがあり、呼び出しの成功/失敗にかかわらず完了時に呼び出されます。これは、結果に関係なく 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
}
);
関連
-
java.lang.NoClassDefFoundError: クラスを初期化できませんでした エラーの理由
-
[解決済み] ブラウザによって異なるURLの最大長とは?
-
[解決済み] URI、URL、URNの違いは何ですか?
-
[解決済み] Angular/RxJS `Subscription` からいつ退会すればいいのか?
-
[解決済み] Angularプロジェクトごとに生成される膨大な数のファイル
-
[解決済み】URI、URL、URNの違いは何ですか?[重複] URIとURLとURNの違いは何ですか?
-
[解決済み】Node.jsのほとんどのポートでリスニングするとEACCESエラーが発生する。
-
[解決済み】http:// のリンクを全て // に変更することは可能ですか?
-
[解決済み] Cache-Control: privateとは何ですか?
-
[解決済み] ngForとAsync Pipe Angular 2でObservableオブジェクトから配列を利用する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
youtubeマッチチャンネル(チャンネル)
-
[解決済み] HTTP_CLIENT_IPとHTTP_X_FORWARDED_FORの違いは何ですか?
-
[解決済み] X-Forwarded-Forヘッダーが表示されないブラウザの理由
-
[解決済み] HTTP POSTリクエストでは、どのようにパラメータが送信されるのですか?
-
[解決済み] updateとdeleteのHTTPステータスコード?
-
[解決済み] Chromeのネットワークデバッガをリダイレクトで使用する方法
-
[解決済み】AngularでHTTPリクエストにURL引数(クエリ文字列)を渡すには?
-
[解決済み】GETリクエストで同じパラメータ名で複数の値を渡す場合の正しい方法
-
[解決済み】サーバーサイドアプリケーション(PHP、Ruby、Pythonなど)でURLのハッシュ部分を読み取ることはできますか?)
-
[解決済み】HTTPの "Content-Type "ヘッダーのすべての可能な値は何ですか?