2016-05-15 17 views
28

Angular2(RC1)Httpサービスがhttp.post呼び出しを2回実行するという奇妙な問題が発生しました。私はアプリをデバッグしましたが、これはクリックイベントの問題ではないという事実を知っています。コアサービスコールにつながるすべてのコールは、一度実行されます。Angular2 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)); 
} 

が1回実行されます。そして、私が問題を追跡し始めたとき、私のハンドラthis.handleObjectResponseが2回実行されることがわかりました。だから私は、さらに掘り下げ、彼らはこの

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();に、私は私が一度最初のブレークポイントにヒットしていたが、その後、私はから二番目のブレークポイントにヒット@angular/http/src/backends/xhr_backend.tsに達しましたコールバックは2回です。

これは私を惑わせているので、私はangle2の内部構造に精通している人が、これがバグか、私が間違っていたかのように見えるかどうかを調べたいと思っていました。

私のコードでは、GenericServiceを拡張するGenericServiceとFullServiceという抽象的な汎用サービスクラスを作成しました。どちらも抽象的でジェネリックを使用し、異なるコンポーネントに注入される実際のサービスクラスはすべてGenericServiceまたはFullServiceのいずれかに拡張されます。あなたは、このセットアップがダブルポスト実行の責任を負う可能性があると思いますか?

すべてのアイデアがありがとう!

ありがとうございます!

P.S.

これはgetsで発生しませんが、putsでも発生します。

+0

呼び出しコードを共有できますか?おそらくobservableに複数のサブスクリプションがあります。この場合、戻り値this._http.post(this.createURL(this.getCreateURL()、[]、params)、body、options) .map(res => this.handleObjectResponse (res))。share(); ' はそれを解決する必要があります https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/share.md – teleaziz

+1

聖なるものです!本当にありがとうございました。今私は最初にこれを引き起こすために私がやったことの周りに私の頭を包む必要があります。私はそれを受け入れることができますし、もう一度お返事をお送りすることができますので、これを回答として投稿してください! – RVP

答えて

53

httpサービスは、executed on every subscribeを取得するコールドオブザーバブルを返します。最初のサブスクライブでのみ実行され、その後のサブスクライブで同じ値を共有するホットオブザーバブルに変換します。それあなたがしなければならないすべてを変換するには

はそれshareです:私は、フォームの入力フィールドの1に(key.enter)="someSubmitFunction()"を持っているので、これは私に起こっていた

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

このコメントは、Angular2の最新のRCで別の問題を修正するのに役立ちました。ありがとう。 Observablesは美しいコンセプトですが、やりにくいです。 –

+3

それから、 "トリッキー"が逆戻りしているため、物事が悪くなり、完全に動作するのに対して、これは非トリッキーなコードに置き換えられるべきです。 –

+3

httpコールの後にshare()を置いておくといいでしょう。 –

0

。私がこのフィールドでenterを押すと、フォームは2回提出されます。明らかに、これは必要ではありませんでした。私がこれを削除したとき、私はenterを押すとまだフォームが提出されましたが、今は一度だけです。

0
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. 
関連する問題