Angular 6如何等待httpclient返回

Question

我试图从Angular 6调用我的flask接口上的函数。该函数应在单击时验证一些凭据，并根据响应显示错误或导航至页面。

以为我似乎无法找到执行下一行代码之前等待响应的方法。 这会导致一个错误，在该错误中，需要两次按下按钮才能进行导航。

我试着用asyc/await ，尝试使用.then ，尝试切换subscribe到map ，但没有任何工程。

我想我缺少一些关键的东西。

onClick() {
    let data = {
        // some data
    }
    let response = this.login(data);
    if (response["valid"] === true) {
        this.router.navigate(['/cool_page']);
    }
}

login(data) {
    let login_data = {}
    this.httpClient.post('http://somedomain.com/login', JSON.stringify(data)).subscribe( response => {
        login_data = response;    
    });

    return login_data; //this remains empty
}

Answer 1

它需要与订阅有关的小修正。

onClick() {
    let data = {
        // some data
    }
     let response = this.login(data).subscribe( response => {
        if (response["valid"] === true) {
        this.router.navigate(['/cool_page']);
      }
    });

}

login(data) {
    let login_data = {}
    return this.httpClient.post('http://somedomain.com/login', JSON.stringify(data));
}