[angular] Angular 2 http.post ()가 요청을 보내지 않습니다.

Program / 글쓴이

게시 요청을 할 때 각도 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는 Observable을 리턴하므로 초기화 처리를 실행하려면이를 구독해야합니다. 관찰 가능한 게으르다.

자세한 내용은이 비디오를 봐야합니다.

답변

호출을 실행하려면 반환 된 옵저버 블을 구독해야합니다.

Http documentation 도 참조하십시오 .

항상 구독하십시오!

HttpClient그 방법에 의해 반환 된 관찰에 ()에 가입 호출 할 때까지 메소드는 HTTP 요청을 시작하지 않습니다. 이것은 모든 HttpClient 방법에 적용 됩니다.

AsyncPipe에 자동으로 당신을 위해 구독 (및 구독 취소).

HttpClient분석법 에서 반환 된 모든 관찰 가능 항목 은 의도적 으로 차갑 습니다. HTTP 요청의 실행입니다 연기 당신과 같은 추가 작업과 관찰을 연장 할 수 있도록 tap하고 catchError아무것도 실제로 발생하기 전에.

호출 subscribe(...)하면 Observable의 실행이 트리거 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.

답변

Get 메소드는 subscribe 메소드를 사용할 필요는 없지만 post 메소드는 subscribe를 요구합니다. 샘플 코드 가져 오기 및 게시는 다음과 같습니다.

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

답변