Angular2 HTTP观察到

问题描述：

SaveWorkRequest(workRequest: any) { 
    let headers = new Headers({ 'Content-Type': 'application/json' }); // ... Set content type to JSON 
    let options = new RequestOptions({ headers: headers }); // Create a request option 
    let url = 'deployment/SaveWorkRequest'; 
    let dto = { 'workResponse': workRequest }; 

    // post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>; 
    return this.http.post(GlobalVariables.SITE_ROOT + url, dto, options) 
     //.toPromise() 
     //.then(this.extractData) //...and calling .json() on the response to return data 
     .map(this.extractData) 
     .catch(this.handleError); 
} 

// 
private extractData(res: Response) { 
    let body = res.json(); 
    console.log(body); 
    return body || {}; 
}

而这种代码在调用它的组件下面的方法

 let response = this.workRequestService.SaveWorkRequest(this.workRequest) 
     .subscribe(
      hero => this.message = hero, 
      error => this.errorMessage = <any>error); 



    console.log(this.message);

的问题是，在该组件返回的代码之前服务方法。所以console.log（this.message）是未定义的。这一定是我猜的时间问题？

答

是的，这是计时问题。 console.log(this.message);语句在响应从您的http请求到达之前得到执行。您应该在订阅内写入日志语句，如下所示。

let response = this.workRequestService.SaveWorkRequest(this.workRequest) 
    .subscribe(
     hero => 
     { 
      this.message = hero; 
      console.log(this.message); 
     }, 
     error => this.errorMessage = <any>error);

答

试试这个：

ngOnInit() { 
    this.getMessage().subscribe(_ => { 
     console.log(this.message) 
    }); 
} 

public getMessage() { 
    return this.workRequestService.SaveWorkRequest(this.workRequest) 
    .map(hero => this.message = hero,error => this.errorMessage = <any>error);

答

Observable是异步的。如果您尝试console.log(this.message);，您将收到未定义的值，直到订阅值为止。

在模板上，只需添加{{ this.message?.some_property }}如果您关心的错误可能会出来。

Angular2 HTTP观察到

相关推荐