Question

尝试我的第一次角度锻炼。第一次从http post收到未定义的值，但第二次得到正确的响应（Edge，Firefox）。谢谢！

LoginService（调用Http post方法并返回observable）

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转换为typescript对象）

  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

Answer 1

Angular服务器调用是异步的，这意味着代码在执行其余代码之前不会等待服务器响应。比如PHP。因此，您不会看到等待服务器发送数据的空白页。当您想要处理来自服务器调用的respose时，您必须添加subscribe内的所有代码;这意味着是否需要将此信息传递给其他服务。您的代码应如下所示。

＆＃13;

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')
  );
}

＆＃13;

Angular http帖子第一次没有工作，但第二次工作

1 个答案: