等待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']);
    };
};