Angular 4：AppレベルのhttpエラーをObservableエラーとして正しく処理するにはどうすればよいですか？

Question

ステータス== 'エラー'のjsonを通じてアプリケーションレベルのエラーを返すHTTP APIを使用します。私のサインアップサービスで

、私はそれを行う：私は

return this.userService 
     .create(user) 
     .map(
      json => { 
       console.log(json); 
       if (json.status=='error') { 
        console.log('error return throw'); 
        return Observable.throw('Credentials mismatch or not existing'); 
       } 

       const user = json.data as User;  
       return user; 
      }, 
      err => { 
       console.log(err); 
      } 
     ); 

そして、私のsingUp.componentで、ということ：

残念ながら、サービスが観察して（エラーを返したとき

onSubmit() { 
     // blahblah 

     this.si 
     .signUp(this.credentials.emailAddress, this.credentials.password, this.credentials.zipCode) 
     .subscribe(
     user => { 
      console.log(user); 
      console.log(`SignUpComponent.onSubmit() found user.userId ${user.userId}`); 
      this.router.navigate(['signin']); 
     }, 
     err => { 
      this.errorMessage = `*** SignUpComponent: Error while signing up {err}`; 
      console.error('*** SignUpComponent: Error while signing up', err); 
      this.resume(); 
      //this.router.navigate(['signup']); 
     }); 

     this.ngOnChanges(); 
    } 

.throw（））、コンポーネントはerrクロージャをトリガーしませんが、ユーザークロージャはObservable.throwをuserパラメーターとして渡します。

私は、エラー終了がトリガーされたと思います。

そこには何が欠けていますか？

アップデート：ここで私が得るものです：

[Log] SigninService.signUp, zipCode= 
[Log] {data: null, status: "error", message: "Error user create: - missing id API usage v1b3: Tu…ate\"}↵post: []↵.↵", ws: "v1b3: Tuesday, August 25th 2017 20h20 @ Tanger"} 
[Log] error return throw 
[Log] ErrorObservable {_isScalar: false, error: "Credentials mismatch or not existing", scheduler: undefined, _subscribe: function, …} 
[Log] SignUpComponent.onSubmit() found user.userId undefined 

Answer 1

ユーザコールバック内で例外を処理していると、正常に実行されたことを意味します。この場合、Observable.throwsは実際には例外として動作しません。これを達成するには、return Observable.throw("Credentials mismatch or not existing")の代わりにthrow new Error("Credentials mismatch or not existing")を使用する必要があります。 How to throw error from RxJS map operator (angular)

Answer 2

あなたが持っている問題を避けるために、私はあなただけリターンと観察可能部品なしthrow 'Credentials mismatch or not existing'を行う必要があると思います。オブザーバブルの実行中に発生したエラーは、現在のエラーObservableに伝播されます。

現在のところ、jsonレスポンスをObservableに置き換えていますが、これはあなたが望んでいないものです。

理想的には、サーバーはエラーメッセージでjsonではなくエラー応答を返す必要があり、サブスクライブでerrorハンドラーがトリガーされます。

Answer 3

最後に、新しいエラー（）を投げて1）Observableを返すことができます.2）エラーがサブスクリプションの完了パラメータをスローすると、次の解決策を思いつきました。

申し込みサービス：

create(user: User): Observable<User> { 
    const wsUrl = `${this.wsApi}m=create&id=${user.id}`; // URL to web api 

    return this.http.post(wsUrl, JSON.stringify(user), { headers: this.headers }) 
    .retry(3) 
    .map(res => { 
     const json = res.json() as any; 

     if (json.status=='error') throw new Error(json.message); 

     return json.data as User; 
    }); 
} 

サインアップコンポーネント：

onSubmit() { 
     // blahblah 

     this.progressing = true; 

     this.si 
     .signUp(this.credentials.emailAddress, this.credentials.password, this.credentials.zipCode) 
     .finally(() => setTimeout(() => this.progressing = false, 1000)) 
     .subscribe(
      user => this.router.navigate(['signin']), 
      err => this.errorMessage = err 
     ); 

     this.ngOnChanges(); 
    }