2017-07-30 23 views
-1

サービスが完了した後、残りのコードを実行するにはどうしたらいいですか?
例:
私はこのようなAPIのいくつかのデータを取得したい:角2サービスが完了したかどうかを確認します

get_user_info(token: string): Observable<any> { 
    return this.http.get(this.home + 'api/home/account/excerpt?token=' + token) 
    .map((response: Response) => { 
     return response.json().result; 
    }); 
} 

を、私はget_user_infoからデータをサブスクライブしたい:

retrieve_user_info() { 
    this.http.get_user_info(this.back_result.token).subscribe(
     (result: sendBackUserInfo) => { 
      if (result.result == 1) { 
       this.user_info = result.user; 
      } else { 
       console.log(result.messages[0]); 
      } 
     } 
    ); 
} 

が、私が呼ぶときに問題があります機能retrieve_user_info、すぐにデータを取得しません。
どうすれば修正できますか?

EDIT:
これは私がretrieve_user_infoを呼び出す方法です:

submit_login_form() { 
this.http.login_user(this.username, this.password, this.result.language.code) 
    .subscribe((result: loginSendBackResult) => { 
     this.back_result = result; 
     this.retrieve_user_info(); 
     if (this.back_result.result == 1) { 
      this.show_modal = false; 
      console.log(user_info); 
      router.navigate(['home']); 
     } 
    }); 
} 
+0

あなたは "この問題を解決する" ことができない、これは非同期です。データに何をする必要があれば、コールバックの中でそれを行う必要があります:) – Alex

+0

実際にそのデータを使用するコードを表示してください。あなたは '@Input()'をいくつかのコンポーネントに送るか、それとも何をしますか? –

+0

@deezg質問が更新されました – amirsa00

答えて

0

それはJSの問題ではありません。サーバーが必要以上に低速で応答しています。このデータはどこにありますか?テンプレートまたはその他の機能テンプレートで使用する場合は、コンポーネントクラスで宣言できるngOnInit()という関数を使用してテンプレートを取得できます。

@Component({selector: 'my-cmp', template: `...`}) 
class MyComponent implements OnInit { 
    ngOnInit() { 
    // ... 
    } 
} 

https://angular.io/api/core/OnInit

その場合、別の方法

。 httpリクエストをどこでどのようにどこに呼び出すのか、そしてなぜそれがすぐに必要なのかを詳しく説明してください。

retrieve_user_info() { 
    this.http.get_user_info(this.back_result.token).subscribe(
     (result: sendBackUserInfo) => { 
      // Get both data in one request 
      // Better your REST API 
      // Do your checks with the dependent data 
      // If dependent data right then change the router guard 
      // https://angular.io/api/router/CanDeactivate 
      // Route the person using router 
      // https://angular.io/api/router/Router 
     } 
    ); 
} 
+0

ボタンをクリックした後にデータを取得したいのですが!そのボタンはユーザーにログインすることですが、ユーザーログインプロセスが完了する前にサーバーから追加のデータが必要です。私は私の目的をはっきりと説明することができるといいです。 – amirsa00

+0

私はまだ理解しません。なぜ2つのリクエストをトリガーするのですか? – Gary

+0

編集したロジックを使用します。私はあなたが必要としているものとそれが何であるかを知りません。あなたが理解できないものを精巧にしなければならないでしょう。 – Gary

0

あなたは潜在的に使用することができます

subscribe(next?: (value: T) => void, 
      error?: (error: any) => void, 
      complete?:() => void): Subscription; 

あなたは、データが戻っていることを確認することができますので、next?が正常に完了したときcomplete?一部にのみ実行されます。

+1

観察可能なものが完了するまで待つ必要はなく、おそらく望みたくないでしょう。 'next'コールバックが呼び出されるまで待つだけです。 –

1

あなたのリクエストをチェーン化するにはflatMapを使用できます。また、あなたの命名は私をちょっと混乱させました。サービスメソッドを参照するときには、httpの代わりにserviceのようなサービス名を付けて、httpリクエストを送信する場所とサービスでメソッドを呼び出す場所を分けます。だから私は代わりにそれらの場所にserviceを使用しました。

import "rxjs/add/operator/mergeMap"; 
submit_login_form() { 
    this.service.login_user(...) 
    .flatMap((result: loginSendBackResult) => { 
     this.back_result = result; 
     return this.retrieve_user_info(); 
    }); 
    .subscribe(data => { 
     if(this.back_result.result == 1) { 
      console.log(this.user_info) 
      .... 
     } 
    }) 
} 

とあなたのretrieve_user_info()

retrieve_user_info() { 
    return this.service.get_user_info(this.back_result.token) 
    .map((result: sendBackUserInfo) => { 
     if (result.result == 1) { 
      return this.user_info = result.user; 
     } else { 
      console.log(result.messages[0]); 
     } 
    }); 
} 
+0

ちょっとしたデモ... http://plnkr.co/edit/FTDqGndQlbqJ8pUtRyWZ – Alex

+0

コンポーネントからサービスへの "不要なロジック"をすべて削除することも考えられます:) – Alex

関連する問題