Question

这是我在我的服务中定义的功能，我正在调用它我的组件中的服务方法，但它在响应之前返回来自http api调用，所以我得到未定义的返回数据。

    home(){
       this._http
      .post("http://localhost:3000/home", {
      email: JSON.parse(this.cookieService.get("token")).email
    })
    .subscribe(data => {
      this.result = JSON.parse(data["_body"]);
     console.log(this.result); 
     send=>{return this.result}
    })
  }

Answer 1

从服务中返回observable，如下所示

home() : Observable<any> { 
    return this._http
      .post("http://localhost:3000/home", {
          email: JSON.parse(this.cookieService.get("token")).email
      })
     .map(data => {
        let result = JSON.parse(data["_body"]);
        return result;
     });
}

并从您的组件代码订阅返回的Observable，如下所示

this.chatService.home().subscribe((result) => { this.result = result; });

Answer 2

您的服务功能如下：

home() {
  return this._http.post("http://localhost:3000/home", {
    email: JSON.parse(this.cookieService.get("token")).email
  }).map((res:Response) => res.json());
}

然后在您的组件中，您需要订阅该服务以便进行API调用，并且您可以将结果存储在组件变量中。

//Component code

componentFunction() {
  this.chatService.home().subscribe(data => {
    this.result = JSON.parse(data["_body"]);
    console.log(this.result);
  });
}

Answer 3

“角度方式”是服务返回一个Observable。它是在OnInit

中订阅服务的组件

//Your service
home(){
       return this._http  //<--return the http.post
      .post("http://localhost:3000/home", {
      email: JSON.parse(this.cookieService.get("token")).email
    }).map((res:Response) => res.json())

//Your component
    constructor(private myService:Service)
    //Normally in onOnInit
    ngOnInit()
    {
     this.myService.subscribe(data => {
        this.result=data;
      })
    }

Answer 4

根据您的评论

this.result=this.chatService.home();

在您的服务中，您可以

.subscribe(data => {
  this.result = JSON.parse(data["_body"]);
 console.log(this.result); 
 send=>{return this.result}
})

你们都做错了。

进行异步HTTP调用时，需要在订阅中分配值。由于您在组件中调用它，您应该改为

this.result=this.chatService.home()
  .subscribe(data => this.result = data);

在你的服务中，你得到了这个

home(){
 this._http
   .post("http://localhost:3000/home", {
     email: JSON.parse(this.cookieService.get("token")).email
   })
   .map(res => res.json())

您将订阅逻辑移动到您的组件。您还需要使用map运算符，因为从我所看到的，您在这里处理JSON：this.result = JSON.parse(data["_body"]);。好吧，Angular Response对象有一个json()方法只是为了这个目的！

如何在角度4的http api调用中获得响应后返回数据？

4 个答案: