等待HTTP請求在angular 4服務中完成

Question

這可能是一個基本問題。 但是我是角度服務（承諾，可觀察的等等）的新手。

基本上，我在登錄頁面上有一個按鈕（登錄），一旦用戶單擊該按鈕，我就想驗證並生成令牌。 一旦在服務上分配了令牌，那么我將重定向到某個頁面（主頁）。 但是現在發生的是，當我對角度服務函數進行函數調用時，在它獲得（異步）令牌本身之前，我的頁面正在重定向。

---

應用數據服務

`

    import { Injectable } from '@angular/core';
    import { HttpClient,HttpHeaders } from '@angular/common/http';
    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/mergeMap';
    import 'rxjs/add/operator/toPromise';
    @Injectable()
    export class AppDataServiceService {
      tokenGenerated:any='';
      constructor(private http: HttpClient) { 

      }

      getData(){
        console.log("Started.. in service");
         this.http.get('http://host/url').toPromise()
         .then(this.extractData);

      }
      private extractData(res: Response) {
        console.log("completed.. in service");
        this.tokenGenerated=res;
        return res;
    }

    }
    `---------------------------------------------------
    login component

    import { Component, OnInit } from '@angular/core';
    import { AppDataServiceService } from '../app-data-service.service';
    import { Router } from '@angular/router';

    @Component({
      selector: 'app-login-component',
      templateUrl: './login-component.component.html',
      styleUrls: ['./login-component.component.css']
    })
    export class LoginComponentComponent implements OnInit {

      constructor(private dataService:AppDataServiceService,private router:Router) {

       }

      ngOnInit() {
      }

      submit(){
        this.dataService.getData();
        console.log('after executing service');
        this.router.navigate(['/view']);
      };

    }
-------------------------------------------------------------
   login html

<div class="container">
  <label><b>Username</b></label>
  <input type="text" placeholder="Enter Username" name="uname" >

  <label><b>Password</b></label>
  <input type="password" placeholder="Enter Password" name="psw" >



</div>

<input type="button" (click)='submit()'  value="Login"  name="submit"/>

瀏覽器中的控制台輸出：

在服務中開始

執行服務后

服務完工..

您能幫我讓http調用等到它完成嗎？ 我不確定這是否是使用promise來使呼叫同步的方法。

Answer 1

您應該從服務中返回一個Promise（或Observable），並在組件中進行訂閱。

如果不這樣做，該組件將無法知道您的異步代碼何時完成執行，因此它將立即打印該日志語句

像這樣更改服務：

getData(){
    console.log("Started.. in service");
    return this.http.get('http://host/url').toPromise()
        .then(res => this.extractData(res));
}

然后在組件中

submit(){
    this.dataService.getData().then(() => {
        console.log('after executing service');
        this.router.navigate(['/view']);
    };
};