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?

Réponses:



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.

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();
    }
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.