Angular 2 http.post () tidak mengirim permintaan


144

Ketika saya membuat permintaan posting, sudut 2 http tidak mengirim permintaan ini

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

postingan http tidak dikirim ke server tetapi jika saya membuat permintaan seperti ini

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

Apakah ini dimaksudkan dan jika itu dapat seseorang menjelaskan mengapa? Atau itu bug?

Jawaban:



53

Anda harus berlangganan ke observable yang dikembalikan jika ingin panggilan dijalankan.

Lihat juga dokumentasi Http .

Selalu berlangganan!

Sebuah HttpClientmetode tidak memulai permintaan HTTP-nya sampai Anda memanggil subscribe () pada observable yang dikembalikan oleh metode itu. Ini benar untuk semua HttpClient metode .

The AsyncPipe berlangganan (dan berhenti berlangganan) untuk Anda secara otomatis.

Semua pengamatan yang dikembalikan dari HttpClientmetode dirancang dengan dingin . Eksekusi permintaan HTTP ditunda , memungkinkan Anda memperluas observasi dengan operasi tambahan seperti tapdan catchErrorsebelum apa pun benar-benar terjadi.

Memanggil subscribe(...)memicu eksekusi dari observasi dan penyebab HttpClientuntuk menulis dan mengirim permintaan HTTP ke server.

Anda dapat menganggap observasi ini sebagai cetak biru untuk permintaan HTTP yang sebenarnya.

Faktanya, masing subscribe()- masing memulai eksekusi observasi yang terpisah dan independen. Berlangganan dua kali menghasilkan dua permintaan HTTP.

const req = http.get<Heroes>('/api/heroes');
// 0 requests made - .subscribe() not called.
req.subscribe();
// 1 request made.
req.subscribe();
// 2 requests made.

41

Metode get tidak perlu menggunakan metode berlangganan tetapi metode posting membutuhkan berlangganan. Dapatkan dan posting kode contoh di bawah ini.

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();
    }
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.