使用异步函数从 API 初始化数据答案

【问题标题】：init data from API using async function使用异步函数从 API 初始化数据
【发布时间】：2019-10-31 07:44:31
【问题描述】：

我正在为我的第一个应用学习 Ionic/Angular。我必须在初始化时从 API 加载数据并将它们显示在我的视图中。

在我的代码中，我正在调用包含ngOnInit() 上的 API 调用的异步函数。我想从特定参数初始化数据。

问题是：当ngOnInit()被调用时，异步函数还没有完成，所以我的vars是null。

我该怎么做？

代码如下：

async getData(id) {
    try {
      const url = 'http://url/api/pages/'+id;
      const params = {};
      const headers = {};
      const response = await this.http.get(url, params, headers);

      console.log(JSON.parse(response.data)); 
      this.page = JSON.parse(response.data);

    } catch (error) {
      console.error(error.status);
      console.error(error.error); 
      console.error(error.headers);
    }
  }

  ngOnInit() {
    this.getData(11);
  }

以及带有 var 页面的视图：

<p>{{ page.text }}</p>

【问题讨论】：

试试<p>{{ page?.text }}</p>。这样，您将检查 page 是否具有 text 属性。
好的，所以我不会有空值错误。以及在调用API之后的API时如何填充vars，因为视图已经显示？谢谢
我在这里看到的问题是你使用await 和http.get 返回一个observable。您将需要检查 rxjs，或者如何 subscribe 这些可观察对象，因为即使您等待它们，它们仍然没有解决。他们以不同的方式工作。我敢打赌console.log(JSON.parse(response.data)); 这一行会给你某种错误。
@VladimirBogomolov 我认为你是对的。它应该是：const response = await this.http.get(url, params, headers).toPromise(); 或 this.http.get(url, params, headers).subscribe((response) => this.page = response.data);
我可以直接订阅 http 响应作为您的第二个建议吗？

标签： angular typescript ionic-framework

【解决方案1】：

关于数据检索，您可以：

保留 async/await 对，将this.http.get 的结果转换为Promise，如下所示：const response = await this.http.get(url, params, headers).toPromise();
或不使用 async/await 对并订阅 http.get 返回的 Observable，如下所示：this.http.get(url, params, headers).subscribe((response) => this.page = response.data);

所以，它会是：

async getData(id) {
    // ...
      const response = await this.http.get(url, params, headers).toPromise();
      this.page = JSON.parse(response.data);
    // ...
}

或者...

getData(id) {
    // ...
      this.http.get(url, params, headers).subscribe((response) => {
           this.page = response.data
      });
    // ...
}

关于视图渲染：

选项 1：*ngIf 任何风格。

即：如果你想显示一个临时文本来指示值正在加载：

<p *ngIf="!!page; else elseBlock">{{ page.text }}</p>
<ng-template #elseBlock>Loading data...</ng-template>

选项 2：The safe navigation operator ( ? )。如果在加载 page 时显示空白值是可以接受的，您可以这样做：

<p>{{ page?.text }}</p>

在这两种情况下，page 从 API 获取值后，框架都会更新 HTML 视图。

【讨论】：

非常感谢，我会试试的。现在我面临一些 CORS 问题，我也会检查一下。谢谢
@TyYt CORS 是一个完全不同的故事。你之前没有面对它，因为请求实际上并没有被执行。在此更改之后，现在正在调用 API。希望你解决它：）如果这有用，请考虑up-voting它。