Angular 2 http.post () sendet die Anfrage nicht

140

Wenn ich eine Post-Anfrage mache, sendet der Winkel 2 http diese Anfrage nicht

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

Der http-Beitrag wird nicht an den Server gesendet, aber wenn ich die Anfrage so stelle

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

Ist das beabsichtigt und wenn ja, kann mir jemand erklären warum? Oder ist es ein Fehler?

Nicu
quelle

Antworten:

226

Da die postMethode der HttpKlasse ein Observable zurückgibt, müssen Sie es abonnieren, um die Initialisierungsverarbeitung auszuführen. Observables sind faul.

Sie sollten sich dieses Video für weitere Details ansehen:

Thierry Templier
quelle
15
@ Thiery Ich kann das Video nicht sehen, da es nur für Mitglieder ist
Tatarin
47

Sie müssen das zurückgegebene Observable abonnieren, wenn der Aufruf ausgeführt werden soll.

Siehe auch die HTTP-Dokumentation .

Immer abonnieren!

Eine HttpClientMethode beginnt ihre HTTP-Anforderung erst, wenn Sie subscribe () für das von dieser Methode zurückgegebene Observable aufrufen. Dies gilt für alle HttpClient Methoden .

Die AsyncPipe abonniert (und abbestellt) sich automatisch für Sie.

Alle von HttpClientMethoden zurückgegebenen Observablen sind konstruktionsbedingt kalt . Die Ausführung der HTTP - Anforderung wird verschoben , so dass Sie die beobachtbare mit zusätzlichen Operationen wie verlängern tapund catchErrorbevor etwas passiert tatsächlich.

Das Aufrufen subscribe(...)löst die Ausführung des Observablen aus und bewirkt HttpClient, dass die HTTP-Anforderung erstellt und an den Server gesendet wird.

Sie können sich diese Observablen als Blaupausen für tatsächliche HTTP-Anforderungen vorstellen.

Tatsächlich subscribe()initiiert jeder eine separate, unabhängige Ausführung des Observablen. Das zweimalige Abonnieren führt zu zwei HTTP-Anforderungen.

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
quelle
41

Für die Get-Methode muss die Subscribe-Methode nicht verwendet werden, für die Post-Methode ist jedoch die Subscribe-Methode erforderlich. Beispielcodes zum Abrufen und Veröffentlichen finden Sie weiter unten.

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
quelle