javascript - 我如何等待 Angular4 HttpClient 响应?

标签 javascript angular typescript promise observable

<分区>

我正在尝试将我的 Api 调用转移到服务中。到目前为止,我在每个需要它的组件中都进行了 api 调用,这也导致将大量变量传递给其他组件,并且通常会导致我的代码中出现大量垃圾。

因此,当我的 api 调用在我的组件中时,我需要我请求的对象,一切都很好 - 我启动了 HttpClient get 方法,并在收到正确的对象时更新页面。

现在,当我尝试将其移动到服务时,它不会更新 - 我将在我的代码中对其进行解释。

这是我服务中的方法:

getProjects(): any {
    this.http.get<Project[]>('http://localhost:54639/api/tfs/projects').subscribe(data => {
        console.log(data['value']);
        return data['value'];
    });
}

这是我在我的组件中对这个方法的请求:

ngOnInit(): void {
  console.log("I'm in OnInit!");
  this.projects = this.ApiConnection.getProjects();
  console.log(this.projects);
}

所以,这就是问题所在:我的控制台首先记录“我在 OnInit 中!”,然后记录未定义 - 均来自 ngOnInit,然后它在我的服务中记录正确的数据形式 getProjects()。

我正试图以某种方式等待它,但老实说,我不知道如何等待。我尝试从中做出 promise ,尝试使用 await、map 或 .then(),但它似乎不起作用,谷歌也没有太大帮助。

编辑:呃,我确实知道它是异步的,我什至在标题中指定了“如何等待”...问题是,我不知道如何在 TypeScript 和 Angular4 HttpClient 中完成它。我应该重复的主题中的答案是关于回调和前提的,而我正在尝试等待一个可观察的....

最佳答案

试试这个,

getProjects(): any {
    return this.http.get<Project[]>('http://localhost:54639/api/tfs/projects').map(data => {
        console.log(data['value']);
        return data['value'];
    });
}  

在你的 ngOnInit()

ngOnInit(): void {
  console.log("I'm in OnInit!");
  this.ApiConnection.getProjects().subscribe(data =>{
  this.projects = data;
  console.log(this.projects);
  });

}

关于javascript - 我如何等待 Angular4 HttpClient 响应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46092866/

相关文章:

javascript - 使用 JavaScript/jQuery 删除或替换样式表(<link>)

javascript - 从变量中删除连字符

javascript - 如何用 JavaScript window.location 链接替换所有 <a href ="..."> 链接以便在 Web 应用程序中使用?

javascript - 如何使用 angularfire2 在电子邮件和密码注册后将数据添加到我的 firebase

json - 如何将存储在 Observable<any> 中的值转换为 typescript 中的字符串?

javascript - jQuery UI 如何创建其精确复制的绝对定位拖动助手?

angular - Angular 测试失败

angular - Angular 4 中的树结构

javascript - Recurly.js 和 Angular 4

node.js - NestJS MQTT 微服务的有效@MessagePattern 是什么?