web-dev-qa-db-ja.com

Angular2 http.postが2回実行される

Angular2(RC1)Httpサービスがhttp.post呼び出しを2回実行するという奇妙な問題に遭遇しました。アプリをデバッグしましたが、これはクリックイベントの問題ではないことは事実です。コアサービスコールに至るすべてのコール

_public create(json: Object, params?: Object): Observable<T> {
    let body = JSON.stringify([json]);
    let headers = this.getHeaders();
    let options = new RequestOptions({ headers: headers });

    return this._http.post(this.createURL(this.getCreateURL(), [], params), body, options)
    .map(res => this.handleObjectResponse(res));
}
_

一度実行されます。その後、問題のトレースを開始すると、ハンドラー_this.handleObjectResponse_が2回実行されることがわかりました。だから私はさらに掘り下げて、_@angular/http/src/backends/xhr_backend.ts_に到達しました。

_constructor(req: Request, browserXHR: BrowserXhr, baseResponseOptions?: ResponseOptions) {
    this.request = req;
    this.response = new Observable<Response>((responseObserver: Observer<Response>) => {
        let _xhr: XMLHttpRequest = browserXHR.build();
        _xhr.open(RequestMethod[req.method].toUpperCase(), req.url);
        // load event handler
        ...
        ..
_

だから、_this.request = req;_にブレークポイントを置き、let _xhr: XMLHttpRequest = browserXHR.build();に別のブレークポイントを置き、最初のブレークポイントを1回たたきましたが、コールバックから2番目のブレークポイントを2回たたきました。

これは私を夢中にさせてきたので、angular2の内部に精通している人がこれがバグのように見えるのか、私が間違ったことのように見えるのかを明らかにすることができるかどうかを確認したかったのです。

私のコードでは、GenericServiceとFullServiceを拡張するいくつかの抽象的な汎用サービスクラスを作成しました。これらは両方とも抽象的であり、ジェネリックを使用し、さまざまなコンポーネントに注入される実際のサービスクラスはすべてGenericServiceまたはFullServiceを拡張します。このセットアップがダブルポストの実行に関与していると思われますか?

すべてのアイデアは大歓迎です!

前もって感謝します!

追伸.

これはgetでは発生しませんが、putでも発生します。

32
RVP

Httpサービスは、 サブスクライブごとに実行 を取得するコールドオブザーバブルを返します。これを、最初のサブスクライブでのみ実行され、後続のサブスクライブで同じ値を共有するホットオブザーバブルに変換します。

変換するには、 share it:

return this._http.post(this.createURL(this.getCreateURL(), [], params), body, options)
.map(res => this.handleObjectResponse(res))
.share();
64
teleaziz

私は(key.enter)="someSubmitFunction()"フォームの入力フィールドの1つ。このフィールドでEnterキーを押すと、フォームが2回送信されます。どうやら、これは必要ありませんでした。これを削除しても、フォームはEnterキーを押したときに送信されますが、現在は1回だけです。

1
mad_fox
its happening because HTTP OPTIONS executed first, and you have to restrict unwanted HTTP method before executing your Logic, always use isset method,see example below

 if(isset($_POST))
 {
    $name = $_POST["name"];
    $country = $_POST["country"];

    $sql = 'INSERT INTO user values("' . $name . '","' . $country . '")';

            if ( $conn->query($sql)=== TRUE) 
            {
                $outp =  "Inserted " .  $name . "  and  "  . $country;
                echo json_encode($outp);
            } else {
                echo json_encode("Error: " . $sql . "<br>" . $conn->error);
            }
        }


here it will insert row in table only when its POST METHOD.
0
Jayesh L