如何等到 http.get 在 angular 中完成
How to wait until http.get is finished in angular
我一直在尝试向我的 data
数组添加值,但是我遇到了问题,它比 getValue
函数的值更早到达 data.push()
回来。我一直在尝试修复它,但无法想出解决方案,感觉有点迷茫。
这是我形成数据的函数:
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;
});
如何避免在该值实际存在之前将数据推送到数组?
how can I avoid pushing data to array before that value is actually there?
将它与订阅链接起来,例如
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();
}
如果这是一个不那么复杂的问题,我完全支持将这个问题作为重复问题结束,但是,正如我对该问题的评论所说,它要复杂一些。
对于初学者,您绝对应该阅读异步函数以及如何使用它们的响应。接下来,您通常应该尽量避免在循环内使用异步函数,因为它们很难预测和控制。幸运的是,有一些方法可以让异步函数的行为更加同步。
注意以下几点:
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
的调用是异步调用,因为它需要延迟(对服务器的调用)才能 returned 值。我将其包装在 Promise
中,因为您希望订阅的成功路径和错误路径都指向 return 一个值。
如果我们用 async
关键字标记 formData
方法,我们现在可以在方法中使用 await
关键字。这将导致方法流程在控制继续之前等待来自 getValue
承诺的 return。
旁注:通过使用异步标记 formData
方法,它使方法的 return 类型成为 Promise
,即使您不是直接 return从方法中获取任何内容。
我一直在尝试向我的 data
数组添加值,但是我遇到了问题,它比 getValue
函数的值更早到达 data.push()
回来。我一直在尝试修复它,但无法想出解决方案,感觉有点迷茫。
这是我形成数据的函数:
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;
});
如何避免在该值实际存在之前将数据推送到数组?
how can I avoid pushing data to array before that value is actually there?
将它与订阅链接起来,例如
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();
}
如果这是一个不那么复杂的问题,我完全支持将这个问题作为重复问题结束,但是,正如我对该问题的评论所说,它要复杂一些。
对于初学者,您绝对应该阅读异步函数以及如何使用它们的响应。接下来,您通常应该尽量避免在循环内使用异步函数,因为它们很难预测和控制。幸运的是,有一些方法可以让异步函数的行为更加同步。
注意以下几点:
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
的调用是异步调用,因为它需要延迟(对服务器的调用)才能 returned 值。我将其包装在 Promise
中,因为您希望订阅的成功路径和错误路径都指向 return 一个值。
如果我们用 async
关键字标记 formData
方法,我们现在可以在方法中使用 await
关键字。这将导致方法流程在控制继续之前等待来自 getValue
承诺的 return。
旁注:通过使用异步标记 formData
方法,它使方法的 return 类型成为 Promise
,即使您不是直接 return从方法中获取任何内容。