Angular 2 http.post() is not sending the request
Since the post
method of the Http
class returns an observable you need to subscribe it to execute its initialization processing. Observables are lazy.
You should have a look at this video for more details:
- https://egghead.io/lessons/rxjs-rxjs-observables-vs-promises
Get method doesn't require to use the subscribe method but post method requires the subscribe. Get and post sample codes are below.
import { Component, OnInit } from '@angular/core'
import { Http, RequestOptions, Headers } from '@angular/http'
import 'rxjs/add/operator/map'
import 'rxjs/add/operator/catch'
import { Post } from './model/post'
import { Observable } from "rxjs/Observable";
@Component({
templateUrl: './test.html',
selector: 'test'
})
export class NgFor implements OnInit {
posts: Observable<Post[]>
model: Post = new Post()
/**
*
*/
constructor(private http: Http) {
}
ngOnInit(){
this.list()
}
private list(){
this.posts = this.http.get("http://localhost:3000/posts").map((val, i) => <Post[]>val.json())
}
public addNewRecord(){
let bodyString = JSON.stringify(this.model); // Stringify payload
let headers = new Headers({ 'Content-Type': 'application/json' }); // ... Set content type to JSON
let options = new RequestOptions({ headers: headers }); // Create a request option
this.http.post("http://localhost:3000/posts", this.model, options) // ...using post request
.map(res => res.json()) // ...and calling .json() on the response to return data
.catch((error:any) => Observable.throw(error.json().error || 'Server error')) //...errors if
.subscribe();
}
}
You must subscribe to the returned observable if you want the call to execute.
See also the following angular documentation "Communicating with backend services using HTTP".
Always subscribe!
An
HttpClient
method does not begin its HTTP request until you callsubscribe()
on the observable returned by that method. This is true for allHttpClient
methods.The AsyncPipe subscribes (and unsubscribes) for you automatically.
All observables returned from
HttpClient
methods are cold by design. Execution of the HTTP request is deferred, allowing you to extend the observable with additional operations such astap
andcatchError
before anything actually happens.Calling
subscribe(...)
triggers execution of the observable and causesHttpClient
to compose and send the HTTP request to the server.You can think of these observables as blueprints for actual HTTP requests.
In fact, each
subscribe()
initiates a separate, independent execution of the observable. Subscribing twice results in two HTTP requests.const req = http.get<Heroes>('/api/heroes'); // 0 requests made - .subscribe() not called. req.subscribe(); // 1 request made. req.subscribe(); // 2 requests made.