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?

Nicu
sumber

Jawaban:

231

Karena postmetode Httpkelas mengembalikan sebuah observable, Anda perlu berlangganan itu untuk menjalankan pemrosesan inisialisasinya. Yang bisa diamati itu malas.

Anda harus melihat video ini untuk lebih jelasnya:

Thierry Templier
sumber
16
@Thiery Tidak dapat menonton video, karena ini untuk member saja
Tatarin
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.
Igor
sumber
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();
    }
}
Murat ÖNER
sumber