Angular2对POST请求的第一个响应未定义

Question

我有一个发出 POST 请求的简单方法

postData(){
  var headers = new Headers();
  headers.append('Content-Type', 'application/json');
  var json = JSON.stringify({email: 'Admin', password: 'Admin'});

  return this._http.post('http://localhost:8080/addressbook_rest/api/v1/contacts/login',  json , 
    {headers: headers});

}

然后我从另一个组件调用上述方法

onLogin() {
  this._service.postData().map(res => res.json()).subscribe(
    data => { this.loggedin = data },
    err => { console.log(err); }
  );

  console.log(this.loggedin);
}

问题是在第一次调用时，变量 this.loggedin 是未定义的，但之后我得到了我想要的（this.loggedin=true）。我不知道为什么它只是从第二次得到它。

Answer 1

其实是因为请求是异步处理的。这意味着console.log(this.loggedIn); 将首次返回 undefined，因为它在订阅回调之外。它在收到请求响应之前执行。

你应该使用类似的东西：

onLogin() {
  this._service.postData().map(res => res.json()).subscribe(
    data => {
      this.loggedin = data;
      console.log(this.loggedin); // <-------
    },
    err => { console.log(err); }
  );
}

Answer 2

这是因为 post 请求是异步的。你应该检查你的 this.loggedin 里面的订阅功能或里面的地图功能。当您在console 上打印它时，this.loggedin 中没有存储任何内容，它将在成功调用 ajax 后更新。

查看此服务here希望它能帮助您解决问题。 dragon.service.ts

---

要在 POST 后检查它，请使用 .then() 这是成功承诺的回调。它会在您的 ajax 调用返回时运行。你应该在那里 console.log() 。