Angular2 http observable

Question

I have the below method that calls an http observable

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 || {};
}

And this code in a component that calls it

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



    console.log(this.message);

The problem is, the code in the component returns before the service method. So console.log(this.message) is undefined. It must be a timing problem i guess?

HirenParekh · Accepted Answer · 2017-03-02 19:04:14Z

1

Yes, this is the timing issue. console.log(this.message); statement get executes before the response arrives from your http request. you should write the log statement inside subscribe as follows.

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

answered Mar 2, 2017 at 19:04

HirenParekh

3,7453 gold badges26 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

elmiomar · Accepted Answer · 2017-03-02 18:50:16Z

0

Try this:

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

answered Mar 2, 2017 at 18:50

elmiomar

2,0322 gold badges21 silver badges30 bronze badges

Comments

Calvin Ferrando · Accepted Answer · 2017-03-02 18:53:22Z

0

Observable is asynchronous. If you try to console.log(this.message); you will get undefined value until the subscribe value is there.

On the template, just add {{ this.message?.some_property }} if you concern with the error might come out.

answered Mar 2, 2017 at 18:53

Calvin Ferrando

4,1423 gold badges18 silver badges23 bronze badges

Collectives™ on Stack Overflow

Angular2 http observable

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related