在 angular 4 中的 http api 调用中获得响应后如何 return 数据？

Question

This is my function which i define in my service and i am calling this service method in my component but it return before the response has come from http api call, so i get undefined return data.

    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

您的服务功能如下：

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 2

Return 从您的服务中观察到的结果如下所示，

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 3

"angular way" 是服务 return 一个 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() 方法就是为了这个目的！

在 angular 4 中的 http api 调用中获得响应后如何 return 数据？

how to return the data after getting response in http api call in angular 4?

api

http

subscribe

angular