http.post () ของ Angular 2 ไม่ได้ส่งคำขอ

เมื่อฉันส่งคำขอโพสต์เชิงมุม 2 http ไม่ได้ส่งคำขอนี้

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

โพสต์ http ไม่ได้ถูกส่งไปยังเซิร์ฟเวอร์ แต่ถ้าฉันทำเช่นนี้

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

นี่คือจุดประสงค์หรือไม่และถ้ามีใครสามารถอธิบายได้ว่าทำไม หรือว่าเป็นบั๊ก?

เนื่องจากpostเมธอดของHttpคลาสส่งคืนสิ่งที่สังเกตได้คุณต้องสมัครสมาชิกเพื่อประมวลผลการเริ่มต้น สิ่งที่สังเกตได้คือขี้เกียจ

คุณควรดูวิดีโอนี้สำหรับรายละเอียดเพิ่มเติม:

• https://egghead.io/lessons/rxjs-rxjs-observables-vs-promises

คุณต้องสมัครรับข้อมูลที่ส่งคืนซึ่งสังเกตได้หากคุณต้องการให้การเรียกใช้ดำเนินการ

ดูเพิ่มเติมเอกสาร Http

สมัครสมาชิกเสมอ!

HttpClientวิธีการไม่ได้เริ่มต้นการร้องขอ HTTP จนกว่าคุณโทรสมัคร () เมื่อสังเกตกลับโดยวิธีการที่ นี้เป็นจริงสำหรับทุก วิธีการHttpClient

AsyncPipeสมัคร (และการยกเลิกการสมัคร) สำหรับคุณโดยอัตโนมัติ

สิ่งที่สังเกตได้ทั้งหมดกลับมาจากHttpClientวิธีการที่เย็นโดยการออกแบบ การดำเนินการตามคำขอ HTTP จะถูกเลื่อนออกไปทำให้คุณสามารถขยายการสังเกตได้ด้วยการทำงานเพิ่มเติมเช่นtapและcatchErrorก่อนที่จะเกิดอะไรขึ้นจริง

การเรียกsubscribe(...)จะทำให้เกิดการประมวลผลของสิ่งที่สังเกตได้และทำให้เกิดHttpClientการเขียนและส่งการร้องขอ HTTP ไปยังเซิร์ฟเวอร์

คุณสามารถนึกถึงสิ่งที่สามารถสังเกตได้เหล่านี้เป็นพิมพ์เขียวสำหรับคำขอ HTTP ที่แท้จริง

ในความเป็นจริงแต่ละคนsubscribe()เริ่มต้นแยกการดำเนินการที่เป็นอิสระของสิ่งที่สังเกตได้ การสมัครสมาชิกสองครั้งส่งผลให้มีการร้องขอ 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.

รับวิธีไม่จำเป็นต้องใช้วิธีการสมัครสมาชิก แต่วิธีการโพสต์ต้องสมัครสมาชิก รับและโพสต์โค้ดตัวอย่างอยู่ด้านล่าง

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();
    }
}