如何等到http.get完成角度

问题描述 投票:0回答:2

我一直在尝试为我的data数组添加值,但是我遇到了问题,它比data.push()函数的值更早返回到getValue。我一直试图解决它,但无法提出解决方案,并感到有点迷失在这里。

这是我形成数据的功能:

formData() {
  for (const id of Object.keys(this.cols)) {
    let p= cols[id];
    switch (p.name) {
      case 'a':
      this.temp.name= this.addValue(m, p);
        break;
      case 'b':
        let idx = 1;
        let surname= this.getValue(idx);
        break;
    }
  }
  this.data.push(this.temp);
});

这就是我的getValue函数的样子:

 getValue(id: string) {
let url = this.baseUrl + '/streams/' + id+ '/data?';
url += 'from=' + from + '&';
url += 'to=' + to;
this.http.get(url).map(r => r.json()).subscribe((response: any) => {
        if (response.data.values[0] !== null && response.data.values[0] !== undefined) {
         return response.data.values[0];
        }
}, (error: any) => {
    return null;
});

在实际存在该值之前,如何避免将数据推送到数组?

angular typescript subscription
2个回答
1
投票

如果这是一个不那么复杂的问题,我会完全支持将这个问题视为重复,但正如我对这个问题的评论所说的那样,这个问题有点复杂。

对于初学者,您一定要阅读异步函数以及如何使用它们的响应。接下来,您通常应该尽量避免在循环内部使用异步函数,因为它们很难预测和控制。幸运的是,有一些方法可以让异步函数表现得更加同步。

请注意以下事项:

async formData(): Promise<void> {
  for (const id of Object.keys(this.cols)) {
    let p= cols[id];
    switch (p.name) {
      case 'a':
      this.temp.name= this.addValue(m, p);
        break;
      case 'b':
        let idx = 1;
        let surname = await this.getValue(idx);
        break;
    }
  }
  this.data.push(this.temp);
});

getValue(id: string): Promise<string> {
    return new Promise(resolve => {
        let url = this.baseUrl + '/streams/' + id+ '/data?';
        url += 'from=' + from + '&';
        url += 'to=' + to;
        this.http.get(url).map(r => r.json()).subscribe((response: any) => {
            if (response.data.values[0] !== null && response.data.values[0] !== undefined) {
                resolve(response.data.values[0]);
            }
        }, (error: any) => {
            resolve(null);
        });
    });
}

您对getValue的调用是异步调用,因为它需要延迟(对服务器的调用)才能返回值。我已经将它包装在Promise中,因为您希望订阅的成功和错误路径都返回一个值。

如果我们使用formData关键字标记async方法,我们现在可以在方法中使用await关键字。这将导致方法的流程在控制继续之前等待getValue承诺的返回。

Side-not:通过使用async标记formData方法,即使您没有直接从方法返回任何内容,它也会使方法的返回类型为Promise


0
投票

在实际存在该值之前,如何避免将数据推送到数组?

将其链接到订阅,例如

this.http.get(url).map(r => r.json()).subscribe((response: any) => {
        if (response.data.values[0] !== null && response.data.values[0] !== undefined) {
         // NOTE
         this.loadFormData();
        }
© www.soinside.com 2019 - 2024. All rights reserved.