web-dev-qa-db-ja.com

Angular 2 http.post（）はリクエストを送信していません

投稿リクエストを行うと、angular 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=>{});

これは意図的なもので、もしそうなら誰かが私に理由を説明できますか？それともバグですか？

angularangular2-http
99
Nicu

postクラスのHttpメソッドはオブザーバブルを返すため、初期化処理を実行するにはサブスクライブする必要があります。オブザーバブルは怠け者です。

詳細については、このビデオをご覧ください。

170
Thierry Templier

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();
    }
}
32
Murat ÖNER

呼び出しを実行する場合は、返されたオブザーバブルをサブスクライブする必要があります。

Http documentation も参照してください。

常に購読する！

HttpClientメソッドは、そのメソッドによって返されるオブザーバブルでsubscribe（）を呼び出すまで、HTTP要求を開始しません。これは、すべてのHttpClientメソッドに当てはまります。

AsyncPipe は自動的にサブスクライブ（およびサブスクライブ解除）します。

HttpClientメソッドから返されるすべてのオブザーバブルは、設計上coldです。 HTTPリクエストの実行はdeferredであり、実際に何かが起こる前にtapやcatchErrorなどの追加操作でオブザーバブルを拡張できます。

subscribe(...)を呼び出すと、オブザーバブルの実行がトリガーされ、HttpClientがHTTPリクエストを作成してサーバーに送信します。

これらのオブザーバブルは、実際のHTTPリクエストのblueprintsと考えることができます。

実際、各subscribe()はオブザーバブルの個別の独立した実行を開始します。 2回サブスクライブすると、2つの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.
31
Igor