Observableを購読するとバックエンドへの無限HTTPリクエスト

Question

現在Angles2サイトに機能を追加して、現在ログインしているユーザーの名前を表示しています。

私はバックエンドサービスから必要な情報を取得できるようです。しかし、問題のフロントエンドコードが実行されている場合、バックエンドへの要求は、1つの要求だけが必要なときに、できるだけ速く、繰り返し送信されます。

この無限ループのリクエストは、オブザーバブルを購読するようにコードを変更したときに開始されました。購読しないと、フロントエンドサービスから取得できる情報は使用できませんでした。それは以下の例のように見えました。

{"_isScalar":false,"source":{"_isScalar":false},"operator":{}} 

コンポーネント

loggedInUser() { 
    this.authService.loggedInUser().subscribe(res => { 
     this.currentUser = res; 
     return this.currentUser; 
    }) 
} 

フロントエンドサービス

loggedInUser() { 
    const userId = localStorage.getItem('userId'); 
    return this.http 
     .get('http://localhost:3000/user/current/' + userId) 
     .map((response: Response) => { 
    const user = response.json(); 
    return user; 
}) 

私はこれが本当にスタックオーバーフロー上の他の記事を読んでから "無限ループ" ではないことを学びました。しかし、私はこれらの他の投稿の解決策を理解することができませんでした。

ありがとうございました！

Answer 1

フィドルなしではわかりませんが、コンポーネントのloggedInUser関数をテンプレートから直接呼び出していますか？コンポーネントで

、

include { Component, OnInit } from '@angular/core'; 
... 
class AppComponent implements Oninit { 

    ngOnInit() { 
    this.authService.loggedInUser().subscribe(res => { 
     this.currentUser = res; 
    }); 
    } 
} 

テンプレートNgOnDestroyで

<div>Logged in as: {{currentUser}}</div> 

ベストにもunsubscribeでthis.currentUserを参照してngOnInitフックを購読コードを移動します。

Answer 2

簡単な方法は、ユーザーがログインした後にローカルストレージに情報を保存することです。

//In your authService 
loggedInUser() { 
    return this.http.post(AppSettings.API_URL + 'login', data, this.options) 
    .map((response: Response) => { 
     let username = response.json().data.username; 
     if(username){ 
      localStorage.setItem('username', username); 
      return true; 
     } else { 
      return false; 
     } 
    } 

//In your login form component 
onSubmit() { 
    this.authService.loggedInUser(email, ....) 
     .subscribe(
      result => { 
       if (result === true) { 
        //It's ok 
       } 
      error => { 
       //error 
      } 
     ) 
} 

1度だけ購読したい場合は、take演算子を使用できます。 1つのコンポーネントを終了するか別のコンポーネントに移動するときに、オブザーバブルの登録を解除することを忘れないでください（ngOnDestroyメソッドでこれを行います）。

Answer 3

.retry関数を使用すると、限られた回数だけ要求を送信することができます。

あなたはこのような何か書くことができます：要求が初めて失敗した場合、このコードの

loggedInUser() { 

    const userId = localStorage.getItem('userId'); 

    return this.http 

     .get('http://localhost:3000/user/current/' + userId) 

     .retry(1) 

     .map((response: Response) => { 

    const user = response.json(); 

    return user; 

}) 

を、それが一度だけ再試行します。

ここをクリックしてください。http://reactivex.io/documentation/operators/retry.html