Angular 2 http.post () no envía la solicitud

140

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?

Nicu
fuente

Respuestas:

226

Dado que el postmétodo de la Httpclase devuelve un observable, debe suscribirse para ejecutar su proceso de inicialización. Los observables son vagos.

Debes echar un vistazo a este video para obtener más detalles:

Thierry Templier
fuente
15
@Thiery no puede ver el video, ya que es solo para miembros
Tatarin
48

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

Consulte también la documentación de Http .

¡Suscríbete siempre!

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

Los AsyncPipe suscribe (y cancela la suscripción) de forma automática.

Todos los observables devueltos de los HttpClientmétodos 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 tapy catchErrorantes de que algo suceda realmente.

Llamar subscribe(...)desencadena la ejecución de lo observable y hace HttpClientque componga y envíe la solicitud HTTP al servidor.

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

De hecho, cada uno subscribe()inicia una ejecución separada e independiente de lo 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.
Igor
fuente
41

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 ejemplos de códigos 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();
    }
}
Murat ÖNER
fuente