Oberservable returned undefined

Question

ユーザーにサインインする際に問題が発生しました。私が取り組んでいるのは、認証のためにdevise_token_authを実行している5つのapiを持つ原点です。本当に奇妙なのは、サーバーログでは、要求が完了して200のステータスを返すことを示しています。さらに、observable自体またはmap関数のいずれかが未定義に戻っているように見えますが、私はなぜそれがわかりません。誰かが見ていることができる場合は素晴らしいだろう。

auth.service.ts

import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs' 
import { Response, Http, Headers, RequestOptions, } from '@angular/http' 
import * as Toast from 'nativescript-toast' 
// import 'rxjs/add/operator/map' 
// import 'rxjs/add/operator/catch' 
// import 'rxjs/add/Observable/throw' 

@Injectable() 
export class AuthService { 

    constructor(private http: Http) {} 

    signinUser(signInData: { email: string, password: string }): Observable<Response> { 
    let headers = new Headers; 
    headers.append('Content-Type', 'application/json') 
    let options = new RequestOptions({ headers: headers }) 
    let url = 'backend api' 

    return this.http.post(url, signInData, options) 
     .map((res: Response) => { 
     let body = res.json() 
     console.log("body: " + body) 
     console.log('status: ' + res.json().status) 
     Toast.makeText('status: ' + res.json().status).show(); 
     console.log('statusText: ' + res.json().statusText) 
     Toast.makeText('statusText: ' + res.json().statusText).show(); 
     return body || null 
     }) 
     .catch((error) => { 
     return Observable.throw(error) 
     }) 
    } 
} 

signin.component.ts

import { Component, OnInit } from '@angular/core'; 
import { Observable } from 'rxjs/Rx' 
import { Router, NavigationExtras } from '@angular/router' 
import { FormGroup, FormControl, Validators, AbstractControl, FormBuilder } from '@angular/forms' 
import { Http, Headers, RequestOptions, Response } from '@angular/http' 
import { AuthService } from '../auth/auth.service' 
import * as Toast from "nativescript-toast"; 

@Component({ 
    moduleId: module.id, 
    selector: 'app-signin', 
    templateUrl: './signin.component.html', 
    styleUrls: ['./signin.component.css'] 
}) 
export class SigninComponent implements OnInit { 
    signinForm: FormGroup; 

    constructor(private router: Router, 
       private http: Http, 
       private fb: FormBuilder, 
       private authService: AuthService) {} 

    ngOnInit() { 
    this.signinForm = this.fb.group({ 
     'email': new FormControl(null, [Validators.required, Validators.email, 
             Validators.pattern("[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}")]), 
     'password': new FormControl(null, Validators.required) 
    }) 
    } 

    onSignin(form: any) { 
    const email = form.email 
    const password = form.password 

    this.authService.signinUser({ email, password }) 
     .subscribe(
     (res) => { 
      if(res.statusText == 'OK') { 
      this.router.navigate(['movies']) 
      } else { 
      console.log(res.status + ' FAILURE') 
      Toast.makeText(res.status + ' FAILURE').show(); 
      } 
     }, 
     (error) => { 
      Toast.makeText(error.message).show(); 
     }, 
     () => { 
      console.log('IN SUBSCRIBE') 
      Toast.makeText('IN SUBSCRIBE').show(); 
     } 
    ) 
    } 
} 

EDIT 1

は、相続人コンソールここ

JS: body: [object Object] 
JS: status: undefined 
JS: statusText: undefined 
JS: undefined FAILURE 
JS: IN SUBSCRIBE 

Answer 1

の内容は何です起こっている：

応答で.json（）を呼び出すと、レスポンスの本文が取得され、JSON.parse（）が呼び出され、その値が返されます。したがって、応答ステータスやstatusTextのようなものは、json（）から返された値にはありません。実際のjsonレスポンスボディのみがそこにあります。

あなたはこのようなあなたのサービスに直接応答オブジェクトからそれらを取得し、それらのものにアクセスする場合：あなたのコンポーネント内用として

return this.http.post(url, signInData, options) 
    .map((res: Response) => { 
    let body = res.json() 
    console.log("body: " + body) 
    console.log('status: ' + res.status) 
    Toast.makeText('status: ' + res.status).show(); 
    console.log('statusText: ' + res.statusText) 
    Toast.makeText('statusText: ' + res.statusText).show(); 
    return body || null 
    }) 
    .catch((error) => { 
    return Observable.throw(error) 
    }) 

}

ように、あなたはそれを構築する必要がありますあなたのコンポーネントは応答ステータスのようなものに関心を持つ必要はありません。これはサービスレベルのタスクです。それが必要でない場合は、Observable.throw（）を使用してコンポーネントエラーハンドラに移動します。ただし、httpサービスが何らかのエラー応答を受け取った場合、介入する必要なく、エラーハンドラに移動します。また、この作品

：あなたはSOのためにいくつかのコードを削除しない限り、

.catch((error) => { 
    return Observable.throw(error) 
}) 

は全く無意味です。あなたがしているのは、エラーを再提出することだけです。