Angular http post第一次不工作,但第二次工作
问题描述:
尝试我的第一次角运动。第一次从http post发送未定义的值,但第二次获得正确的响应(Edge,Firefox)。谢谢!Angular http post第一次不工作,但第二次工作
login服务(电话HTTP POST方法,并返回观察到的)
login(loginRequest: LoginRequest){
console.log("LoginService.login - userName " + loginRequest.username);
let options = new RequestOptions({ headers: headers });
return this.http.post(this.http_url, loginRequest, options).map(res =>
res.json());
LoginFormComponent(调用服务类和转换JSON以打字稿对象)
onSubmit() {
this.loginSvc.login(this.loginRequest).subscribe(
data => this.loginResponseStr = data,
error => alert(error),
() => console.log('Request completed')
);
var loginResponse = new LoginResponse();
loginResponse.fillFromJSON(JSON.stringify(this.loginResponseStr));
console.log(loginResponse.status);
console.log(loginResponse.statusDesc);
if(loginResponse.status == "SUCCESS"){
this.router.navigate(['/home-page']);
}
控制台登录
LoginService.login - userName admin main.bundle.js:370:9
undefined main.bundle.js:266:9
undefined main.bundle.js:267:9
Request completed main.bundle.js:263:181
LoginService.login - userName admin main.bundle.js:370:9
SUCCESS main.bundle.js:266:9
VALID USER main.bundle.js:267:9
Request completed main.bundle.js:263:181
答
角服务器调用是异步的,这意味着代码不会等待服务器呃在执行其他代码之前做出回应。比如PHP。所以你不会看到等待服务器发送数据的空白页面。当你想处理来自服务器调用的respose时,你必须添加subscribe
中的所有代码;这意味着如果这些信息需要传递给其他服务。 你的代码应该看起来像这样。
onSubmit() {
this.loginSvc.login(this.loginRequest).subscribe(
data => {
this.loginResponseStr = data
var loginResponse = new LoginResponse();
loginResponse.fillFromJSON(JSON.stringify(data));
console.log(loginResponse.status);
console.log(loginResponse.statusDesc);
if (loginResponse.status == "SUCCESS") {
this.router.navigate(['/home-page']);
}
},
error => alert(error),
() => console.log('Request completed')
);
}
HTTP调用是异步的。您需要将检查响应的代码移动到onNext处理程序中。 – hdk