web-dev-qa-db-ja.com

Angular2非同期パイプでのエラー処理

Angular2非同期パイプを使用して、DOMに値をストリーミングしています。これは実際の簡単な例です：

const stream = Observable.interval(1000)
  .take(5)
  .map(n => { if (n === 3) throw "ERROR"; return n; });

<div *ngFor="for num of stream | async">
  {{num}}
</div>

<div id="error"></div>

私がやりたいことは、1〜5のシーケンスを表示することですが、エラー項目（3）に#error divとエラーメッセージ。

これには2つのことが必要と思われます。1つ目は、Angular非同期パイプがエラーを伴うインテリジェントな処理を実行できることです。これには兆候がありません。ソースコードを見ると、明らかにJSがスローされます。例外ですが、あまりフレンドリーではないようです。

2つ目は、エラー後にシーケンスを再開または続行する機能です。私はcatchやonErrorResumeNextなどについて読みましたが、これらはすべて、エラー時に切り替えられる別のシーケンスを含んでいます。これは、ストリームを生成するロジックを非常に複雑にします。その上で、一連の数値を配置したいと思います（この単純な例では）。エラーが発生するとゲームは終了し、オブザーバブルは完了し、別のオブザーバブルでのみ「再開」できるという沈黙の感覚があります。私はまだ観測可能なものを学んでいます。これは実際にそうですか？

だから私の質問は2つあります：

  1. Angular2の非同期パイプはエラーでインテリジェントに何かできますか？
  2. オブザーバブルには、エラー後に続行する簡単な方法がありますか？
error-handlingangularrxjs
16
user663031

はい、catchオペレーターとエラーが発生した後に何かを実行する機能についてはあなたは正しいです...

私はcatch演算子を利用してエラーをキャッチし、何かを行います：

const stream = Observable.interval(1000)
  .take(5)
  .map(n => {
    if (n === 3) {
      throw Observable.throw(n);
    }
    return n;
  })
  .catch(err => {
    this.error = error;
    (...)
  });

そしてテンプレートで：

<div>{{error}}</div>

最初のオブザーバブルを続行できるようにするには、エラーが発生した時点から新しいオブザーバブルを作成する必要があります。

createObservable(i) {
  return Observable.interval(1000)
    .range(i + 1, 5 - i)
    .take(5 - i)
  });
}

catchコールバックで使用します。

  .catch(err => {
    this.error = error;
    return this.createObservable(err);
  });

これらの2つの質問は、次のことに役立ちます。

10
Thierry Templier

1）いいえ、asyncパイプはサブスクライブおよびサブスクライブ解除し、受信したイベントを返します。エラーがasyncパイプを受け取る前に、エラーを処理する必要があります。

2）catch演算子を使用でき、それがオブザーバブルを返す場合、その値はエラーの代わりに.catch(err => Observable.of(-1))によって出力されます。

これを使用して特別な「エラー」値を出力し、*ngIf="num === -1などを使用してエラー値を特別な方法で表示できます。

詳細については、こちらをご覧ください https://blog.thoughtram.io/angular/2017/02/27/three-things-you-didnt-know-about-the-async-pipe.html =

9
Günter Zöchbauer