Angular 2 http.post () n'envoie pas la requête

141

Lorsque je fais une demande de publication, le http angular 2 n'envoie pas cette demande

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

le message http n'est pas envoyé au serveur mais si je fais la demande comme ça

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

Est-ce l'intention et si c'est le cas, quelqu'un peut-il m'expliquer pourquoi? Ou c'est un bug?

Nicu
la source

Réponses:

227

Étant donné que la postméthode de la Httpclasse retourne une observable, vous devez l'abonner pour exécuter son traitement d'initialisation. Les observables sont paresseux.

Vous devriez jeter un œil à cette vidéo pour plus de détails:

Thierry Templier
la source
15
@Thiery Impossible de regarder la vidéo, car elle est réservée aux membres
Tatarin
49

Vous devez vous abonner à l'observable renvoyée si vous souhaitez que l'appel s'exécute.

Voir aussi la documentation Http .

Abonnez-vous toujours!

Une HttpClientméthode ne commence pas sa requête HTTP tant que vous n'appelez pas subscribe () sur l'observable retournée par cette méthode. Ceci est vrai pour toutes les HttpClient méthodes .

L' AsyncPipe s'abonne (et se désabonne) automatiquement pour vous.

Toutes les observables renvoyées par les HttpClientméthodes sont froides par conception. L'exécution de la requête HTTP est différée , ce qui vous permet d'étendre l'observable avec des opérations supplémentaires telles que tapet catchErroravant que quoi que ce soit ne se passe réellement.

L'appel subscribe(...)déclenche l'exécution de l'observable et provoque la HttpClientcomposition et l'envoi de la requête HTTP au serveur.

Vous pouvez considérer ces observables comme des plans pour les requêtes HTTP réelles.

En fait, chacun subscribe()lance une exécution distincte et indépendante de l'observable. L'abonnement deux fois entraîne deux requêtes 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
la source
41

La méthode Get ne nécessite pas l'utilisation de la méthode subscribe, mais la méthode post nécessite l'abonnement. Vous trouverez ci-dessous des exemples de codes d'obtention et de publication.

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
la source