web-dev-qa-db-fra.com

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

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

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

la publication http n'est pas envoyée au serveur, mais si je fais la demande comme ceci

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

Est-ce que c'est prévu et si c'est le cas, quelqu'un peut-il m'expliquer pourquoi? Ou c'est un bug?

angularangular2-http
109
Nicu

Comme la méthode post de la classe Http renvoie un observable, vous devez le souscrire pour exécuter son traitement d'initialisation. Les observables sont paresseux.

Vous devriez regarder cette vidéo pour plus de détails:

182
Thierry Templier

Vous devez vous abonner à l'observable renvoyé si vous voulez que l'appel soit exécuté.

Voir aussi le documentation HTTP .

Toujours vous abonner!

Une méthode HttpClient ne commence pas sa requête HTTP jusqu'à ce que vous appeliez subscribe () sur l'observable renvoyé par cette méthode. Ceci est vrai pour toutes les méthodes HttpClient.

Le AsyncPipe souscrit (et désabonne) automatiquement pour vous.

Toutes les observables renvoyées par les méthodes HttpClient 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 tap et catchError avant tout. se passe réellement.

L'appel de subscribe(...) déclenche l'exécution de l'observable et force HttpClient à composer et à envoyer la requête HTTP au serveur.

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

En fait, chaque subscribe() lance une exécution distincte et indépendante de l'observable. S'abonner 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.
34
Igor

La méthode Get ne nécessite pas l'utilisation de la méthode subscribe, mais la méthode post nécessite l'abonnement. Obtenez et publiez des exemples de codes ci-dessous.

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();
    }
}
34
Murat ÖNER