Angular2エラーを返すHTTPサービスで観察可能charによってchar

Question

私は完全なスタックアプリケーションのためのangular2フロントエンドを構築しています。私は、ユーザーのログインに取り組んでいると私は、ログインフォームが送信されたときに呼び出され、この機能があります：次のように私のUserServiceの中にログイン機能がある

onSubmit(email, password) { 
    this.userService.login(this.user.email, this.user.password).subscribe((result) => { 
     console.log('reps' + result) 
     if (result) { 
      this.router.navigate(['']); 
     } 
    }); 
} 

を：

login(_email, _password) { 
    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 

    let data = { email: _email, password: _password }; 
    console.log(data); 
    return this.http.post('/api/login', data, options) 
     .map(this.extractData) 
     .map((res) => { 
      console.log('res' + JSON.stringify(res)) 
      if (res.token) { 
       localStorage.setItem('auth_token', res.token); 
       this.loggedIn = true; 
      } 
      return true; 
     }).catch(this.handleError); 
} 

そして最後に、handleErrorの機能：

private handleError(error: Response | any) { 
    // In a real world app, we might use a remote logging infrastructure 
    console.log('isinError Handler' + error); 
    let errMsg: string; 
    if (error instanceof Response) { 
     const err = error || JSON.stringify(error); 
     console.log('err' + err); // Prints out "Response with status: 401 Unauthorized for URL: http://localhost:3000/api/login" 
     errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
    } else { 
     errMsg = error.message ? error.message : error.toString(); 
    } 
    console.error('msg' + errMsg); // Prints out "401 - Unauthorized Response with status: 401 Unauthorized for URL: http://localhost:3000/api/login" 
    return errMsg; 
} 

私は間違ったパスワードを送信すると、私はエラーを取得：

401 - Unauthorized Response with status: 401 Unauthorized for URL: http://localhost:3000/api/login

エラーハンドラの変数errMsgから印刷されています。これは素晴らしいですが、私のコンポーネントに戻って、resp4、resp0、resp1 ...を出力します。すなわちcharによるerrMsg char。これをどのようにして1つのフルストリングに戻すことができますか？

Answer 1

あなたはJSONを返さないという確信があります。あなたは、Stringに応答して、JSONを期待しています。

あなたの応答コードでこのような何かを...

let json = JSON.parse(str); 
res.send(json); // responding with parsed JSON 

Answer 2

オペレータcatch()は、次のオブザーバが再登録して続行する新しいObservableを返さなければならないコールバックをパラメータとして受け取ります。

あなたはとてもあなたのコードはこれに相当し、コールバックから単なる文字列errMsgを返している：because of subscribeToResult() is used internallyをコンソールに出力します

Observable.create(obs => { 
     obs.next('r1'); 
     obs.next('r2'); 
     obs.next('r3'); 
     obs.error('error'); 
    }) 
    .catch(val => val) 
    .subscribe(val => console.log(val)); 

：http://plnkr.co/edit/HODmdrNqRrw5ctSICktj?p=preview

：

r1 
r2 
r3 
e 
r 
r 
o 
r 

はライブデモを参照してください。

コンポーネントでエラーを受け取りたい場合は、エラーを再現し、を使用する必要があります。 subscribe()方法についてハンドラ：

... 
.catch(val => { 
    throw val; 
}) 
.subscribe(
    val => console.log(val), 
    val => console.log('Error:', val) 
); 

。なお、Angular2にあなたはRxJS 5とそのcatch()方法はまだドキュメントに存在していないを使用しているので、あなたはRxJS 4の元のドキュメントを読めばそれが動作をする可能性があります異なっている。