PromiseオブジェクトをAngular 2のJSONに変換してください。

Question

私はHTTP POSTを作成し、応答が失敗したかどうかを確認しようとしています。

HTTP呼び出しは次のようになります。

doLogin(credentials) { 
    var header = new Headers(); 
    header.append('Content-Type', 'application/x-www-form-urlencoded'); 
    var body = 'username=' + credentials.username + '&password=' + credentials.password; 
    return new Promise((resolve, reject) => { 
     this.http.post(this.url, body, { 
      headers: header 
     }) 
      .subscribe(
       data => { 
        resolve(data.json()); 
       }, 
       error => { 
        resolve(error.json()); 
       } 
      ); 
    }); 

} 

そして、この関数の呼び出しは以下の通りです：クロームコンソールで

data: Object; 
errorMessage: Object; 

login($event, username, password) { 
    this.credentials = { 
     username: username, 
     password: password 
    }; 

    this._loginService.doLogin(this.credentials).then(
     result => { 
      this.data = result; 
      console.log(this.data); 
     }, 
     error => { 
      this.errorMessage = <any>error; 
      console.log(this.errorMessage); 
     }); 
} 

を、データは以下の通りです：

Object {status: "Login success", token: "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJjcmlzdGkiLCJ1c2VyS…blf1AzZ6KzRWQFNGXCrIeUHRG3Wrk7ZfCou135WmbVa15iYTA"} 

角度2でステータスにアクセスするにはどうすればよいですか？ this.data.statusにアクセスしようとしていると、機能しません。

ステータスとトークンのプロパティを持つクラスを作成する必要がありますか？

Answer 1

質問に答えるには、httpからの観測値のサブスクリプションで利用可能なブール値response.okを使用できます。

あなたのコードに基づいて、dataオブジェクトを約束してdata.okを検査してから、data.jsonを解析することができます。

//... 
return new Promise((resolve, reject) => { 
    this.http.post(this.url, body, { 
     headers: header 
    }) 
     .subscribe(resolve, 
     error => { 
       reject(error.json()); 
      } 
     ); 
}); 

// then you would have something like this: 

this._loginService.doLogin(this.credentials).then(
    result => { 
     if (result.ok) { 
      this.data = result; 
      console.log(this.data); 
     } 
    }, 
    error => { 
     this.errorMessage = <any>error; 
     console.log(this.errorMessage); 
    }) 

SUGGESTION今

私はあなたが本当にそれを必要としないと考えているように、私は、約束を取り払うことをお勧めします。誰でもあなたのサービスはちょうどそうのように、HTTPポストによって返され、観察を購読することができ消費している。

doLogin(credentials) { 
    let header = new Headers(); 
    header.append('Content-Type', 'application/x-www-form-urlencoded'); 
    var body = 'username='+credentials.username+'&password='+credentials.password; 
    return this.http.post(this.url, body, { headers: header }); 
} 

を次に、ログイン時：

login($event, username, password) { 
    this.credentials = { 
     username: username, 
     password: password 
    }; 

    this._loginService.doLogin(this.credentials).subscribe(response => { 
     if (response.ok) { // <== CHECK Response status 
      this.data = response.json(); 
      console.log(this.data); 
     } else { 
      // handle bad request 
     } 
    }, 
    error => { 
     this.errorMessage = <any>error; 
     console.log(this.errorMessage); 
    }); 
} 

すると、この情報がお役に立てば幸い！

Answer 2

あなたはこのようにそれを行うことができます：

data: Object; 
errorMessage: Object; 

login($event, username, password) { 
    this.credentials = { 
     username: username, 
     password: password 
    }; 

    this._loginService.doLogin(this.credentials).then(
     (result: any) => { 
      this.data = result; 
      console.log(this.data); 
      console.log(this.data.status); 
     }, 
     error => { 
      this.errorMessage = <any>error; 
      console.log(this.errorMessage); 
     }); 
} 

いずれかを入力しresultを設定します。そうすれば、statusにアクセスできるようになりますが、classを作成し、serviceの中にrxjs/mapを使用してclassを入力することができます。