example angular angular2-http

example - return this http post angular



Angular 2 http.post() no envĂ­a la solicitud (3)

Cuando hago una solicitud de publicación, el angular 2 http no envía esta solicitud

this.http.post(this.adminUsersControllerRoute, JSON.stringify(user), this.getRequestOptions())

la publicación http no se envía al servidor, pero si hago la solicitud de esta manera

this.http.post(this.adminUsersControllerRoute, JSON.stringify(user), this.getRequestOptions()).subscribe(r=>{});

¿Es esto intencionado y si es así, alguien puede explicarme por qué? O es un error?



Debe suscribirse al observable devuelto si desea que se ejecute la llamada.

Consulte también la documentación de Http .

¡Suscríbete siempre!

Un método HttpClient no comienza su solicitud HTTP hasta que llame a subscribe () en el observable devuelto por ese método. Esto es cierto para todos los métodos HttpClient .

AsyncPipe suscribe (y AsyncPipe ) automáticamente.

Todos los observables devueltos por los métodos HttpClient son fríos por diseño. La ejecución de la solicitud HTTP se difiere , lo que le permite extender lo observable con operaciones adicionales como tap y catchError antes de que ocurra algo.

Llamar a subscribe(...) desencadena la ejecución del observable y hace que HttpClient y envíe la solicitud HTTP al servidor.

Puede pensar en estos observables como planos para solicitudes HTTP reales.

De hecho, cada subscribe() inicia una ejecución separada e independiente del observable. Suscribirse dos veces da como resultado dos solicitudes HTTP.

content_copy const req = http.get<Heroes>(''/api/heroes''); // 0 requests made - .subscribe() not called. req.subscribe(); // 1 request made. req.subscribe(); // 2 requests made.


El método de obtención no requiere el uso del método de suscripción, pero el método de publicación requiere la suscripción. Obtenga y publique códigos de muestra a continuación.

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