时间戳

首页 > 解决方案 > Angular 从 API 检索数据

angular - Angular 从 API 检索数据

问题描述

我正在从不同的 API 检索数据，但我遇到了一些问题。

第一部分运行良好，代码如下：

ngOnInit(): void {
  this.http.get('http://.../api/getData?table=getdata&filter=remediation_status:1')
    .subscribe( data => { this.incidents = data, console.log(data);})
}

对于第二步，我尝试使用在第一步中检索到的值从另一个 API URL 和同一组件中检索数据，但这些值被视为“未定义”。

For example `console.log(this.incidents); ` returns "undefined" while it's defined just above.

是否可以从 API 检索数据并将其用于同一组件（在 ngOnInit():) 中？先感谢您

标签： angularapicomponents

解决方案

我假设第二个代码在第一个代码之后，所以，让我稍微解释一下：
您的代码将以这种方式读取：

  • 您的 HTTP 调用将启动，但不会停止代码流
  • 即使 HTTP 未完成，该 HTTP 调用之后的代码也会运行
  • 您在 HTTP 调用中设置的变量将是未定义的，因为 HTTP 调用尚未完成
  • 在某些情况下，您的变量将包含数据，因为 HTTP 调用将完成，但不是在您想要的那一刻

因此，有两种方法可以处理此问题：

  • 您可以将您拥有的第二个代码设置为一个函数，并从您的 HTTP 请求的 subscribe 方法调用该函数，这样，您将拥有您需要使用的数据
  • 您可以使用 async & await 等待“直到您的 HTTP 请求完成，然后继续执行代码，这意味着它将读取您的 HTTP 调用，但它不会继续执行您的代码，直到完成，您可以阅读更多关于此的信息这里和这里

推荐阅读