Angular 2 http.post () không gửi yêu cầu


140

Khi tôi thực hiện một yêu cầu bài viết, http 2 góc không gửi yêu cầu này

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

bài viết http không được gửi đến máy chủ nhưng nếu tôi thực hiện yêu cầu như thế này

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

Đây có phải là dự định và nếu nó có thể giải thích cho tôi tại sao? Hay là một lỗi?

Câu trả lời:



47

Bạn phải đăng ký để có thể quan sát được trả lại nếu bạn muốn cuộc gọi thực hiện.

Xem thêm tài liệu http .

Luôn đăng ký!

Một HttpClientphương thức không bắt đầu yêu cầu HTTP của nó cho đến khi bạn gọi đăng ký () trên phương thức có thể quan sát được trả về bởi phương thức đó. Điều này đúng cho tất cả các HttpClient phương pháp .

Các AsyncPipe đăng ký cao (và hủy đăng ký) cho bạn tự động.

Tất cả các vật quan sát được trả về từ HttpClientcác phương pháp đều lạnh theo thiết kế. Việc thực thi yêu cầu HTTP được hoãn lại , cho phép bạn mở rộng khả năng quan sát được bằng các hoạt động bổ sung như tapcatchError trước khi mọi thứ thực sự xảy ra.

Gọi subscribe(...)kích hoạt thực thi của có thể quan sát và nguyên nhân HttpClientđể soạn và gửi yêu cầu HTTP đến máy chủ.

Bạn có thể nghĩ về những vật quan sát này như bản thiết kế cho các yêu cầu HTTP thực tế.

Trong thực tế, mỗi subscribe()khởi xướng một thực thi độc lập, riêng biệt của quan sát được. Đăng ký hai lần kết quả trong hai yêu cầu 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.

41

Phương thức Get không yêu cầu sử dụng phương thức đăng ký nhưng phương thức đăng yêu cầu đăng ký. Nhận và gửi mã mẫu dưới đây.

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();
    }
}
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.