How to make HTTP POST call in Angular2 and print the response

Question

I am new to Angular2 and buuilding a sample project to learn it. I am curently looking at how to make HTTP calls in Angular2 and found this code snippet example:

var headers = new Headers();
headers.append('Content-Type', 'application/json');
this.http.post('http://www.syntaxsuccess.com/poc-post/', 
                       JSON.stringify({firstName:'Joe',lastName:'Smith'}),
                       {headers:headers})
.map((res: Response) => res.json())
.subscribe((res:Person) => this.postResponse = res);

I am not sure what the subscribe does, but my main objective is to print the response. From this code I can see the response, but I am unsure how to "isolate and access it" (I hope that makes sense). My question is how would I print the response to the console?

Answer 1

My question is how would I print the response to the console?

You can just print res:

.subscribe((res:Person) => { this.postResponse = res; console.log(res); });

Click here for demo plunk.

---

I am not sure what the subscribe does (...)

The result of Http.post(...) (link) is an Observable<Response> (link).

In your code, you pick the result of the POST (an Observable<Response>) and call .map() (link) on it. In your case, you do that to parses the response as JSON and transform it into an object:

.map((res: Response) => res.json())

Now, the result of .map() is also an Observable<Response>. That's when you call subscribe.

subscribe() (link) is a method of the Observable (link) class, and it allow you to, tipically, "register" or "subscribe" three functions that will handle/read the results (or "events") this observable emits - they are called (on)next, (on)error and (on)complete.

So, the code using .subscribe() is usually:

.subscribe(
     (response) => {
            /* this function is executed every time there's a new output */
           console.log("VALUE RECEIVED: "+response);
     },
     (err) => {
            /* this function is executed when there's an ERROR */
            console.log("ERROR: "+err);
     },
     () => {
            /* this function is executed when the observable ends (completes) its stream */
            console.log("COMPLETED");
     }
 );

So, in order to fully understand Angular2's Http, I suggest you read some resources on RxJS and Observables. When you get back from it, things will be much simpler, I promise (no pun intended :).